淘宝、网易移动端 px 转换 rem 原理,Vue-cli 实现 px 转换 rem
在过去的一段时间里面一直在使用Vue配合 lib-flexible和px2rem-loader配合做移动端的网页适配。秉着求知的思想,今天决定对他的原理进行分析。目前网上比较主流使用的就是淘宝方案和网易的解决方案,所以今天我就从这两方面入手深度了解这两个方案。
网易转换rem分析
首先网易的设计稿是基于iPhone5设计的也就是宽度640px。(先不考虑dpr的问题下面会说)然后设置1rem等于100px( HTML font-size为100px),相当于6.4rem = 100%宽度 = 设备的宽度。
由于是基于6.4rem开发。iPhone5 的物理像素是320px(dpr是2.0),如果此时还想让6.4rem等于设备宽度只能调整1rem对应font-size的比例, 320 / 6.4 = 50 让1rem=50px就可以实现。如果想让 iPhone6 适配只需要 1rem = (375 / 6.4) = 58.59375px 就可以实现iPhone6的适配,这个方法可以适配市面上绝大多数的移动端设备。
只需要加下面这句话可以实现我上述效果。
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
淘宝转换rem分析
这次咱们还是拿iPhone5(640px)的设计稿举例,淘宝的思想是无论当前页面多宽,让10rem = 页面宽度 = 100%,所以1rem = 64px 然后通过dpr设置缩放整个页面,以达到高保真的效果。
iPhone5的宽度是640px,页面最终完成效果也是640px,iPhone的dpr是2,所以设置 <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
就可以了适配iPhone5了。当然这些东西lib-flexible都帮我们做好了。我只不过说一下,让好奇的小伙伴知道原理。
Vue-cli配合lib-flexible 实现移动端自适应布局
cnpm intall lib-flexible // 安装lib-flexibleimport 'lib-flexible' // 在 src\main.js 中引入 lib-flexible
完成上面代码就相当于实现了rem动态计算了,如果此时在iPhone5上有一个元素是宽150px,高是200px,想计算rem宽是 150/64 = 2.34375rem,高是200/64 = 3.125rem。
至于dpr的缩放问题,那个就不用关心了。lib-flexible已经帮你做好了。你只需要关心px转换rem即可。
使用 px2rem-loader 自动将px转换rem
cnpm intall px2rem-loader // 安装px2rem-loader
在 build\utils.js 修改成下面的代码。
// 在 cssLoaders 方法内添加下列代码const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 64 //设计稿宽度/10
}
// 将 cssLoaders 方法内的generateLoaders的方法内的 loaders 变量添加 px2remLoader
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader, lessLoader ] : [cssLoader, px2remLoader, lessLoader ]
以上是 淘宝、网易移动端 px 转换 rem 原理,Vue-cli 实现 px 转换 rem 的全部内容, 来源链接: utcz.com/z/379979.html