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. 动态规划经典问题Java实现

    动态规划问题Java实现 如果我们有面值为1元.3元和5元的硬币若干枚,如何用最少的硬币凑够11元? public class DPProblem { public static void main( ...

  2. 移动环境下DNS解析失败后的优化方案

    我们手机游戏中,通过上报收集到的数据来分析,发现相当多的一部分用户,在请求一些配置时会遇到无法解析的情况,或者域名的解析直接被拦截了. 特别是游戏的补丁包文件(放在CDN上),遇到的域名解析失败是最多 ...

  3. SVG渲染顺序及z轴显示问题(zIndex)

    SVG是严格按照定义元素的顺序来渲染的,这个与HTML靠z-index值来控制分层不一样. 在SVG中,写在前面的元素先被渲染,写在后面的元素后被渲染.后渲染的元素会覆盖前面的元素,虽然有时候受透明度 ...

  4. Emulator: glTexImage2D: got err pre :( 0x502 internal 0x1908 format 0x1908 type 0x1401

    Go to Tools > AVD Manager > Virtual device configuration > Show advanced settings > Boot ...

  5. 隐马尔可夫(HMM)、前/后向算法、Viterbi算法

    HMM的模型  图1 如上图所示,白色那一行描述由一个隐藏的马尔科夫链生成不可观测的状态随机序列,蓝紫色那一行是各个状态生成可观测的随机序列 话说,上面也是个贝叶斯网络,而贝叶斯网络中有这么一种,如下 ...

  6. RV32M指令集

    Risc-V定义了可选的RV32M,它定义了整数乘法除法指令. 总共8条指令. Category Fmt RV32I base machine code(bin) comment mul 整数乘法 R ...

  7. 非常好的课程,尤其是有NLP方向的内容,好好学习

    课程地址如下: https://mooc.study.163.com/smartSpec/detail/1001319001.htm 有一个非常好的笔记: https://github.com/fen ...

  8. Python 中parse.quote类似JavaScript encodeURI() 函数

    from urllib import parse jsRet = 'roleO%2f'print(parse.unquote(jsRet))print(parse.quote(jsRet))输出: r ...

  9. linux里tmpfs文件系统

    linux里tmpfs文件系统 是一个虚拟内存文件系统,它不同于传统的用块设备形式来实现的Ramdisk,也不同于针对物理内存的Ramfs.Tmpfs可以使用物理内存,也可以使用交换分区. umoun ...

  10. OCR 基本知识

    OCR,optical character recognition 的简称,也就是光学识别系统,属于图形识别的一个分支,OCR是针对印刷体字符,採用光学的方式将文档资料转换成原始资料黑白点阵的图像文件 ...