新建一个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布局准备)的更多相关文章

  1. Flexible实现H5页面的rem布局适配

    1.https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html (使用Flexible实现手淘H5页面的终端适配) 2.http ...

  2. H5 页面 rem 布局适配方法

    rem 布局适配方案 主要方法为: 按照设计稿与设备宽度的比例,动态计算并设置 html 根标签的 font-size 大小: css 中,设计稿元素的宽.高.相对位置等取值,按照同等比例换算为 re ...

  3. 手机页面rem布局

    手机页面设计一般的大小是640,但是,手机屏幕大小确实不确定的,这样,怎么才能做出适应所有手机的手机页面呢?一般的解决方案有两种,rem布局和百分比布局,更推荐用rem布局来制作手机页面. 首先,给页 ...

  4. 在页面rem布局中用到的js代码

    在你的页面加入以下代码,就初步搞定了 function fontSize() { var view_width = document.getElementsByTagName('html')[0].g ...

  5. 移动端开发rem布局之less+媒体查询布局的原理步骤和心得

    rem即是以html文件中font-size的大小的倍数rem布局的原理:通过媒体查询设置不同屏幕宽度下的html的font-size大小,然后在css布局时用rem单位取代px,从而实现页面元素大小 ...

  6. 手机端页面自适应解决方案-rem布局

    rem布局 布局前插入原生js即可 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationch ...

  7. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  8. 手机端页面自适应之rem布局

    W3C官网上是这样描述rem的--"font size of the root element" . rem布局在移动端发挥的比较好. 阿里团队高清方案: <script&g ...

  9. 关于H5填写信息类页面横向布局总结

    接触h5已经有快一年了,因为一直偏向页面重构所以在页面布局方面也算是经历过风风雨雨.所以总结一下自己用过的方法来比较归纳 首先来说,H5的页面一般分为两种,一种是用来做市场营销的,主要特征是图多,页面 ...

随机推荐

  1. linux用户和组 只 组的管理

    1. groupadd 新建组, 组名最长不能超过32个字节 groupadd -create a new group 语法: groupadd [option] 组名 -g, --gid GID   ...

  2. kubectl相关指令

    在列出.描述.修改或删除其他命名空间中的对象时,需要给kubect1命令传递--namespace(或-n)选项.如果不指定命名空间,kubect1将在当前上下文中配置的默认命名空间中执行操作.而当前 ...

  3. [LGP4707] 重返现世

    世界是物质的,物质是运动的,运动是有规律的,规律是可以被认识的. 关于期望意义下min-max容斥,我们认为每个事件的时间来认识事件,max/min S表示集合S中所有时间最后/最前出现的事件,E(m ...

  4. php通过session来实现登录验证

    1.概述 这几天在做一个内部统计管理系统,所有内容需要登录后才能查看.这就需要系统内部每个模块都有登录验证的功能.在网上找了一圈资料,决定用session来做. 2.系统概况 后端语言:php(用的是 ...

  5. 安装calico

    安装docker:https://www.cnblogs.com/cjsblogs/p/8717304.html 安装etcd集群:https://www.cnblogs.com/cjsblogs/p ...

  6. HDU3622 Bomb Game(二分+2-SAT)

    题意 给n对炸弹可以放置的位置(每个位置为一个二维平面上的点), 每次放置炸弹是时只能选择这一对中的其中一个点,每个炸弹爆炸 的范围半径都一样,控制爆炸的半径使得所有的爆炸范围都不相 交(可以相切), ...

  7. java的Thread Dump诊断工具

    1.1什么是Thread Dump? Thread Dump是非常有用的诊断Java应用问题的工具.每一个Java虚拟机都有及时生成所有线程在某一点状态的thread-dump的能力,虽然各个 Jav ...

  8. Facebook团队合影

    今晚公司年会,晚上有些人不去,我晚上要带孩子,也不去,大家就说那我们中午照个合照吧.没啥子准备,大家都一副油腻的样子.除了要去party的化了妆.

  9. Python算法题(一)——青蛙跳台阶

    题目一(青蛙跳台阶): 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 分析: 假设只有一级台阶,则总共只有一种跳法: 假设有两级台阶,则总共有两种跳法: ...

  10. React学习——子组件给父组件传值

    //子组件 var Child = React.createClass({ render: function(){ return ( <div> 请输入邮箱:<input onCha ...