h5构建页面(rem布局准备)
新建一个flex.js
! function () {
function t(t) {
return this.config = t, this
}
t.prototype = {
reset: function () {
var t = Math.min(document.documentElement.clientWidth, 750) / 750 * 100;
document.documentElement.style.fontSize = t + "px";
var e = parseFloat(window.getComputedStyle(document.documentElement).fontSize),
n = t / e;
/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) || document.documentElement
.setAttribute("flatform", "android"), 1 != n && (document.documentElement.style
.fontSize = t * n + "px")
}
}, window.Adapter = new t, window.Adapter.reset(), window.onload = function () {
window.Adapter.reset()
}, window.onresize = function () {
window.Adapter.reset()
}
}();
引入页面,此时1rem=100px,我们就可以利用这个比例进行换算了。
h5构建页面(rem布局准备)的更多相关文章
- Flexible实现H5页面的rem布局适配
1.https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html (使用Flexible实现手淘H5页面的终端适配) 2.http ...
- H5 页面 rem 布局适配方法
rem 布局适配方案 主要方法为: 按照设计稿与设备宽度的比例,动态计算并设置 html 根标签的 font-size 大小: css 中,设计稿元素的宽.高.相对位置等取值,按照同等比例换算为 re ...
- 手机页面rem布局
手机页面设计一般的大小是640,但是,手机屏幕大小确实不确定的,这样,怎么才能做出适应所有手机的手机页面呢?一般的解决方案有两种,rem布局和百分比布局,更推荐用rem布局来制作手机页面. 首先,给页 ...
- 在页面rem布局中用到的js代码
在你的页面加入以下代码,就初步搞定了 function fontSize() { var view_width = document.getElementsByTagName('html')[0].g ...
- 移动端开发rem布局之less+媒体查询布局的原理步骤和心得
rem即是以html文件中font-size的大小的倍数rem布局的原理:通过媒体查询设置不同屏幕宽度下的html的font-size大小,然后在css布局时用rem单位取代px,从而实现页面元素大小 ...
- 手机端页面自适应解决方案-rem布局
rem布局 布局前插入原生js即可 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationch ...
- 快速构建H5单页面切换骨架
在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...
- 手机端页面自适应之rem布局
W3C官网上是这样描述rem的--"font size of the root element" . rem布局在移动端发挥的比较好. 阿里团队高清方案: <script&g ...
- 关于H5填写信息类页面横向布局总结
接触h5已经有快一年了,因为一直偏向页面重构所以在页面布局方面也算是经历过风风雨雨.所以总结一下自己用过的方法来比较归纳 首先来说,H5的页面一般分为两种,一种是用来做市场营销的,主要特征是图多,页面 ...
随机推荐
- Dijkstra(模板)
#define IOS ios_base::sync_with_stdio(0); cin.tie(0); #include <cstdio>//sprintf islower isupp ...
- Python学习笔记:流程控制
单分支: if 条件: 满足条件后执行的代码 程序举例: leiyu=28if leiyu > 22: print("You can find girl friend..." ...
- Docker结合Jenkins构建持续集成环境
1.环境说明: jenkins+svn:192.168.71.142 测试环境:192.168.71.145 生产环境:192.168.71.148 操作系统:centos7. Maven3. Tom ...
- webpack权限控制
const type= "a"; const menusConfig = { a: ["activity"], b: ["activity" ...
- C#中属性的封装
封装的一般性 封装快捷键:Ctrl+R+E 封装的目的: public修饰的属性,不够安全:private修饰的属性,无法使用所以,用到了封装: 封装就是 隐藏对象的信息,但要流出访问的接口 封装代码 ...
- 【weixin】微信支付---Native支付模式一
[模式一]:商户后台系统根据微信支付规则链接生成二维码,链接中带固定参数productid(可定义为产品标识或订单号).用户扫码后,微信支付系统将productid和用户唯一标识(openid)回调商 ...
- create-react-app创建项目修改配置项的两种方法
方法一:eject 打开 package.json ,可以看到eject.运行 npm run eject 可以让由create-react-app创建的项目的配置项暴露出来. { ... " ...
- Python算法题(一)——青蛙跳台阶
题目一(青蛙跳台阶): 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 分析: 假设只有一级台阶,则总共只有一种跳法: 假设有两级台阶,则总共有两种跳法: ...
- python之数字类型小知识
数字是表示计数的抽象事物,也是数学运算和推理的基础,所以,生活中数字是生活中无处不在的,那么,在python语言中运用数字有哪些小知识呢,不妨花点时间看一下这篇博文,牢记这些小知识. 整数类型中四种进 ...
- Redis之淘汰策略
Redis 内存数据集大小上升到一定大小的时候,就会进行数据淘汰策略. Redis 提供了 6 种数据淘汰策略: 1. volatile-lru:从已设置过期时间的数据集中挑选最近最少使用的数据淘汰. ...