新建一个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. 用SPFA 解决POJ2240

    Arbitrage Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 30790   Accepted: 12761 Descr ...

  2. 如何利用python爬虫爬取爱奇艺VIP电影?

    环境:windows    python3.7 思路: 1.先选取你要爬取的电影 2.用vip解析工具解析,获取地址 3.写好脚本,下载片断 4.将片断利用电脑合成 需要的python模块: ##第一 ...

  3. vue响应原理

    用Object.defineProperty添加属性的方法,给属性加get set方法.当我们操作属性的时候其实底层是在操作dom. <!DOCTYPE html> <html la ...

  4. 【Javascript】 js的构造函数与原形对象的关系

    构造函数只是提供了一个创建对象的模板,它并不是对象的原形. 对象的原形是构造函数的原形,即object. ----------------------------------------------- ...

  5. dom和bom之间的区别

    BOM的核心是windows,表示的是一个浏览器的实例,在网页中自定义的任何一个对象.变量和函数,都以windows作为其全局对象 DOM是针对HTML和XML文档的一个API bom:(Browse ...

  6. CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程

    4要素: width: 125px;  //宽度必须 text-overflow: ellipsis/clip; //省略号或裁剪: white-space: nowrap;//强制内容在一行显示; ...

  7. element-ui 中 el-table 根据scope.row行数据变化动态显示行内控件

    加入本行的数据为scope.row,其数据格式为 { "propertyId": 4, "propertyName": "标题", &quo ...

  8. TCP/IP网络知识

    1.TCP/IP概念 TCP/IP不是单指一种传输协议,而是一组传输控制协议/互联网协议. 2.TCP/IP分层 (计算机网络中,实际应用的网络协议是TCP/IP协议族,TCP/IP的应用层大体上对应 ...

  9. MySQL的左连接查询,只取出最大的一条数据

    今天有个需求,是通过两张表进行查询.一对多的关系.通过一个主键,取出其中的一条.开始以为还好,直接用用了left join on进行查询.却发现了问题所在.其他的好弄.开始的写法借鉴这篇博客:http ...

  10. mac 下的操作

    nodejs在Mac下的卸载 在 node 官网上下载的安装包,用安装包安装的node.应该可以用一下命令行卸载: 在终端输入以下命令: sudo rm -rf /usr/local/{bin/{no ...