移动端自适应布局 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属性.设计稿尺寸.前端与设计之间协作 ...
随机推荐
- 破产姐妹第一季/全集2 Broke Girls迅雷下载
本季2 Broke Girls Season 1 (2011)看点:黑发泼辣的Max(凯特·戴琳斯 Kat Dennings 饰)在纽约布鲁克林区一家低档餐馆打工,餐馆同事包括小个子亚裔老板Han L ...
- node.js使用mysql模块的坑
之前用node.js写的订餐系统,很容易挂掉,一直也没想去解决它.今天看了一下,试了试,原因是在连接数据库的时候没有对error事件进行处理,导致程序一直挂在那里,需要重启服务才能正常使用. ...
- jquery入门 改动网页背景颜色
我们在浏览一些站点,尤其是一些小说站点的时候,都会有改动页面背景颜色的地方,这个功能使用jquery非常easy实现. 效果图: show you code: <!doctype html> ...
- byte[],bitmap,drawable之间的相互转换
Byte[]转Bitmap BitmapFactory.decodeByteArray(data, 0, data.length); Bitmap转Byte[] ByteArrayOutputStre ...
- 得到view坐标的各种方法
这篇文章讲的方法全是再控件可以获取焦点的情况下执行的,如果在oncreat()里面执行,那么得到的都是0 1.getLocationInWindow 这个方法得到的是view相对于当前Activity ...
- [转]PHP: 深入pack/unpack
From : http://my.oschina.net/goal/blog/195749 http://www.w3school.com.cn/php/func_misc_pack.asp PHP作 ...
- 2、Python特征
Python特征 Python编程语言中的定位 脚本语言 高阶动态编程语言 简单易学 Python是一种代表简单主义思想的语言.Python的这种伪代码本质是它最大的优点之一.它使你能够专注于解决问题 ...
- Hadoop基本介绍
1.Hadoop的整体框架 Hadoop由HDFS.MapReduce.HBase.Hive和ZooKeeper等成员组成,其中最基础最重要元素为底层用于存储集群中所有存储节点文件的文件系统HDFS( ...
- Java Base64加密解密
使用Apache commons codec 类Base64 maven依赖 <dependency> <groupId>commons-codec</groupId&g ...
- laravel 5.5 跨域问题解决方案
一.laravel-Cors 安装 在终端执行安装命令如下: composer require barryvdh/laravel-cors 添加服务提供商 在Laravel配置文件app.php的pr ...