移动端自适应布局 rem方案
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方案的更多相关文章
- 处理移动端自适应布局的方法- calc()与vw
在处理移动端自适应布局时,目前前端最流行的方法应该就是使用媒体查询,来设置HTML的字体大小,然后用rem为单位对Dom的宽高进行设置,这个方法的优势在于兼容性方面很好,劣势则在于当前市场上不同的机型 ...
- PC端自适应布局
截止目前,国内绝大多数内容为主的网站(知乎,果壳,V2EX,网易新闻等)均使用内容区定宽布局,大多数电商网站(网易考拉,京东,聚美优品)也使用了内容区定宽的布局,也有些网站使用了自适应布局: 天猫 内 ...
- flexible.js结合rem实现移动端自适应布局
1. 配置开发工具(sublime)插件 https://github.com/flashlizi/cssrem 注意: 只有在‘.css’后缀文件才能使用此插件功能 2. 在h ...
- 移动端自适应之——rem与font-size
需求:在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案:布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方便计 ...
- 个人收藏的移动端网页布局rem解决方案
写移动端项目时,总是会纠结是用css3 media query 还是用rem.移动端框架挺多,但是因为项目都比较小,不考虑使用. 无意在网上找到一个移动端rem布局的解决方案,经个人实践,目前未出现什 ...
- 淘宝、网易移动端 px 转换 rem 原理,Vue-cli 实现 px 转换 rem
在过去的一段时间里面一直在使用Vue配合 lib-flexible和px2rem-loader配合做移动端的网页适配.秉着求知的思想,今天决定对他的原理进行分析.目前网上比较主流使用的就是淘宝方 ...
- 【转载】rem自适应布局-移动端自适应必备
原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...
- 手机端页面自适应解决方案—rem布局(该方案目前已过时)
转自:https://segmentfault.com/a/1190000004705207 相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局fl ...
- 移动端(手机端)页面自适应解决方案—rem布局篇
移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...
随机推荐
- YAML 语言教程
编程免不了要写配置文件,怎么写配置也是一门学问. YAML 是专门用来写配置文件的语言,非常简洁和强大,远比 JSON 格式方便. 本文介绍 YAML 的语法,以 JS-YAML 的实现为例.你可以去 ...
- Android之找回打包key密码的方法
昨天准备给自己的应用发布一个新版本,在apk打包时,发现之前的用的keystore密码忘了.蛋碎了一地,我把我所能想到的密码都试了一遍(注:我平常在各个门户网站注册基本上用的都是那几个字母和数字组合做 ...
- [Android Pro] 终极组件化框架项目方案详解
cp from : https://blog.csdn.net/pochenpiji159/article/details/78660844 前言 本文所讲的组件化案例是基于自己开源的组件化框架项目g ...
- idea自动生成serialVersionUID , serialVersionUID的作用
Java的序列化的机制通过判断serialVersionUID来验证版本的一致性.在反序列化的时候与本地的类的serialVersionUID进行比较,一致则可以进行反序列化,不一致则会抛出异常Inv ...
- TortoiseSVN 和 VisualSVN
ylbtech-Miscellaneos:TortoiseSVN 和 VisualSVN 1. TortoiseSVN 百科返回顶部 1-1.百科 TortoiseSVN 是 Subversion 版 ...
- Python Configparser模块读取、写入配置文件
写代码中需要用到读取配置,最近在写python,记录一下. 如下,假设有这样的配置. [db] db_host=127.0.0.1 db_port=3306 db_user=root db_pass= ...
- pthread_create 报函数参数不匹配问题
pthread_create方法遇到类方法时总会报 argument of type ‘void* (Thread::)(void*)’ does not match ‘void* (*)(void ...
- 如何移除EFI system partition?
莫名其妙, 在我的服务器上出现了这样一种分区, 上面写着EFI system, 删也删不掉, 因为删除分区的菜单是灰掉的. 找到了这篇文章, 成功的删掉了这个烦人的分区. 整个过程记录如下: 参考 ...
- 如何得知当前机器上安装的PowerShell是什么版本的?
$PSVersionTable.PSVersion 参考资料 ================ http://stackoverflow.com/questions/1825585/determi ...
- 如何将frm格式MYD格式MYI格式文件导入MySQL中
frm,myd,myi是属于MySQL存储数据的文件,phpMyAdmin是无法导入的. phpMyAdmin支持的文件格式为sql文件. 其实很简单: 1.找到你的mysql的安装目录下的data文 ...