1、viewport.js

(function(window, document) {
// 给hotcss开辟个命名空间,别问我为什么,我要给你准备你会用到的方法,免得用到的时候还要自己写。
const hotcss = {}
;(function() {
// 根据devicePixelRatio自定计算scale
// 可以有效解决移动端1px这个世纪难题。
let viewportEl = document.querySelector("meta[name=\"viewport\"]"),
hotcssEl = document.querySelector("meta[name=\"hotcss\"]"),
dpr = window.devicePixelRatio || 1,
maxWidth = 540,
designWidth = 0 dpr = dpr >= 3 ? 3 : (dpr >= 2 ? 2 : 1) // 允许通过自定义name为hotcss的meta头,通过initial-dpr来强制定义页面缩放
if (hotcssEl) {
const hotcssCon = hotcssEl.getAttribute("content")
;if (hotcssCon) {
const initialDprMatch = hotcssCon.match(/initial\-dpr=([\d\.]+)/)
if (initialDprMatch) {
dpr = parseFloat(initialDprMatch[1])
}
const maxWidthMatch = hotcssCon.match(/max\-width=([\d\.]+)/)
if (maxWidthMatch) {
maxWidth = parseFloat(maxWidthMatch[1])
}
const designWidthMatch = hotcssCon.match(/design\-width=([\d\.]+)/)
if (designWidthMatch) {
designWidth = parseFloat(designWidthMatch[1])
}
}
} document.documentElement.setAttribute("data-dpr", dpr)
hotcss.dpr = dpr document.documentElement.setAttribute("max-width", maxWidth)
hotcss.maxWidth = maxWidth if (designWidth) {
document.documentElement.setAttribute("design-width", designWidth)
}
hotcss.designWidth = designWidth // 保证px2rem 和 rem2px 不传第二个参数时, 获取hotcss.designWidth是undefined导致的NaN let scale = 1 / dpr,
content = `width=device-width, initial-scale=${scale}, minimum-scale=${scale}, maximum-scale=${scale}, user-scalable=no`
;if (viewportEl) {
viewportEl.setAttribute("content", content)
}
else {
viewportEl = document.createElement("meta")
;viewportEl.setAttribute("name", "viewport")
;viewportEl.setAttribute("content", content)
document.head.appendChild(viewportEl)
}
})() hotcss.px2rem = function(px, designWidth) {
// 预判你将会在JS中用到尺寸,特提供一个方法助你在JS中将px转为rem。就是这么贴心。
if (!designWidth) {
// 如果你在JS中大量用到此方法,建议直接定义 hotcss.designWidth 来定义设计图尺寸;
// 否则可以在第二个参数告诉我你的设计图是多大。
designWidth = parseInt(hotcss.designWidth, 10)
} return parseInt(px, 10) * 320 / designWidth / 20
} hotcss.rem2px = function(rem, designWidth) {
// 新增一个rem2px的方法。用法和px2rem一致。
if (!designWidth) {
designWidth = parseInt(hotcss.designWidth, 10)
}
// rem可能为小数,这里不再做处理了
return rem * 20 * designWidth / 320
} hotcss.mresize = function() {
// 对,这个就是核心方法了,给HTML设置font-size。
let innerWidth = document.documentElement.getBoundingClientRect().width || window.innerWidth if (hotcss.maxWidth && (innerWidth / hotcss.dpr > hotcss.maxWidth)) {
innerWidth = hotcss.maxWidth * hotcss.dpr
} if (!innerWidth) {
return false
} document.documentElement.style.fontSize = `${innerWidth * 20 / 320}px`
;hotcss.callback && hotcss.callback()
} hotcss.mresize()
// 直接调用一次 window.addEventListener("resize", () => {
clearTimeout(hotcss.tid)
;hotcss.tid = setTimeout(hotcss.mresize, 33)
}, false)
// 绑定resize的时候调用 window.addEventListener("load", hotcss.mresize, false)
// 防止不明原因的bug。load之后再调用一次。 setTimeout(() => {
hotcss.mresize()
// 防止某些机型怪异现象,异步再调用一次
}, 333) window.hotcss = hotcss
// 命名空间暴露给你,控制权交给你,想怎么调怎么调。
})(window, document)

2、使用

页面中直接引用viewport.js即可。

移动端自适应布局 rem方案的更多相关文章

  1. 处理移动端自适应布局的方法- calc()与vw

    在处理移动端自适应布局时,目前前端最流行的方法应该就是使用媒体查询,来设置HTML的字体大小,然后用rem为单位对Dom的宽高进行设置,这个方法的优势在于兼容性方面很好,劣势则在于当前市场上不同的机型 ...

  2. PC端自适应布局

    截止目前,国内绝大多数内容为主的网站(知乎,果壳,V2EX,网易新闻等)均使用内容区定宽布局,大多数电商网站(网易考拉,京东,聚美优品)也使用了内容区定宽的布局,也有些网站使用了自适应布局: 天猫 内 ...

  3. flexible.js结合rem实现移动端自适应布局

    1. 配置开发工具(sublime)插件      https://github.com/flashlizi/cssrem     注意: 只有在‘.css’后缀文件才能使用此插件功能   2. 在h ...

  4. 移动端自适应之——rem与font-size

    需求:在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案:布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方便计 ...

  5. 个人收藏的移动端网页布局rem解决方案

    写移动端项目时,总是会纠结是用css3 media query 还是用rem.移动端框架挺多,但是因为项目都比较小,不考虑使用. 无意在网上找到一个移动端rem布局的解决方案,经个人实践,目前未出现什 ...

  6. 淘宝、网易移动端 px 转换 rem 原理,Vue-cli 实现 px 转换 rem

       在过去的一段时间里面一直在使用Vue配合 lib-flexible和px2rem-loader配合做移动端的网页适配.秉着求知的思想,今天决定对他的原理进行分析.目前网上比较主流使用的就是淘宝方 ...

  7. 【转载】rem自适应布局-移动端自适应必备

    原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...

  8. 手机端页面自适应解决方案—rem布局(该方案目前已过时)

    转自:https://segmentfault.com/a/1190000004705207 相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局fl ...

  9. 移动端(手机端)页面自适应解决方案—rem布局篇

    移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...

随机推荐

  1. Swift - UITableView展开缩放动画

    Swift - UITableView展开缩放动画 效果 源码 https://github.com/YouXianMing/Swift-Animations // // HeaderViewTapA ...

  2. IOS的唯一标识符问题(转)

    引用地址 http://www.zhihu.com/question/22599526/answer/21938878 网上搜了下IOS手机标志的种类,直接引用过来. UDID [[UIDevice ...

  3. Emgu CV

    摄像头 Capture _capture = new Capture(0); _capture.SetCaptureProperty(Emgu.CV.CvEnum.CAP_PROP.CV_CAP_PR ...

  4. 开源项目PullToRefresh详解(三)——PullToRefreshScrollView

    和前几篇文章一样,这里还是先设置布局文件,然后找到这个控件.只不过这里要简单很多. 1.布局文件 <?xml version="1.0" encoding="utf ...

  5. 基于图的图像分割(Graph-Based Image Segmentation)

    一.介绍 基于图的图像分割(Graph-Based Image Segmentation),论文<Efficient Graph-Based Image Segmentation>,P. ...

  6. MSSQL2008 全文索引的创建

    从MSSQL2008开始,全文索引推荐的创建方式已经与2005不同了.对于字符类型的数据库,可以直接创建. CREATE UNIQUE INDEX hr_job_idx ON hr_job_datab ...

  7. Asp.net MVC 如何防止CSRF攻击

    什么是CSRF攻击? CSRF(Cross-site request forgery跨站请求伪造,也被称成为"one click attack"或者session riding,通 ...

  8. 第十一章 dubbo通信框架-netty4

    netty4是2.5.6引入的,2.5.6之前的netty用的是netty3.在dubbo源码中相较于netty3,添加netty4主要仅仅改了两个类:NettyServer,NettyClient. ...

  9. DevExpress ChartControl控件实现图表【转】

    1.饼状图图 1.1添加ChartControl控件 在工具箱中找到ChartControl控件,拖到窗口中,创建Pie: 1.2准备数据 private DataTable CreateChartD ...

  10. Spark简介及其在ubuntu下的安装使用

    转:http://blog.csdn.net/pelick/article/details/9888311 Spark概述 Spark是一种与 Hadoop 相似的开源集群计算环境,在性能和迭代计算上 ...