【技术】移动端适配 px2rem/px2vw 的原理与实现

AlexTuan 发布于2019-08-22 18:41 / 748人阅读

摘要：不同的前端框架，配合等打包工具，可以更高效的使用这些插件，完成移动端适配的配置工作。

简介

【目标】：前端开发移动端及H5时候，不需要再关心移动设备的大小，只需要按照固定设计稿的px值布局！
【基础】

dpr（设备像素比）
css的像素px不等于设备像素/分辨率/各种值，css的px可以简单理解为虚拟像素，与设备无关，css的px需要乘dpr计算为设备像素；

css3 的 rem，
即“root em”，是相对于根元素的font-size来做计算；
配合js根据设备的dpr设置html的font-size=“XX”来实现等比缩放

基于 viewport 的长度单位：
vw：即Viewport"s width,1vw等于window.innerWidth的1%，所以窗口宽度是100vm
vh：和vw类似，即Viewport"s height，1vh等于window.innerHeihgt的1%
vmin：vmin的值是当前vw和vh中较小的值
vmax：vmax的值是当前vw和vh中较大的值

实现

总体来说是将px通过预定义的配置，根据不同的dpr计算为rem/vw，来实现不同屏幕大小的响应式伸缩

1. px 转 rem

css3的rem是基于根元素的字体大小计算的尺寸单位，所以通过改变html的font-size来实现rem的响应式布局，例如使用css媒体查询：

html{font-size:10px}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}

但不同分辨率的屏幕计算转换太复杂，媒体查询不能兼顾所有的尺寸，所以可以通过JS计算。先贴代码：

var deviceWidth=document.documentElement.clientWidth;
document.documentElement.style.fontSize =deviceWidth / bodyRemWidth + "px";

例如设计稿基于iphone5的320px，deviceWidth为320px，根元素的font-size基于100px，那body的width可以写为3.2em；
当适配640px的屏幕时，deviceWidth为640px，bodyRemWidth为3.2rem，此时根元素的font-size计算为200px；
deviceWidth就是viewport设置中的deviceWidth,viewport视图提供布局的窗口，包括移动端的显示/缩放比例等设置；
需要设置mate的viewport使得显示时的页面宽度等于设备逻辑像素大小，移动端常用代码：

deviceWidth=设备逻辑像素/(dpr * scale)；
dpr为固定值，高清屏一般为dpr=2，所以scale=1/dpr，js动态设置scale：

var scale = 1 / devicePixelRatio;
document.querySelector("meta[name="viewport"]")
    .setAttribute("content","initial-scale=" + scale + ", 
    maximum-scale=" + scale + ", 
    minimum-scale=" + scale + ", 
    user-scalable=no");

2. 进阶：px 转 vw

方式简而言之就是，基于css3中Viewport相关vw、vh、vmin和vmax单位，将宽高的px计算为vw/vh，而vmax/vmin总是指向那个最大/最小的屏幕长度

var vw = window.innerWidth; 
var vh = window.innerHeight;

例如对于320px的设计稿，屏幕总长一直是100vw，所以比率是3.2，那css代码需要将所有--px/3.2得到**vm，
这样很麻烦，所以使用postcss-px-to-viewport实现编译时候的自动计算,还要配合postcss-write-svg,postcss-aspect-ratio-mini等插件解决Retina，1px等问题

3. 再进阶：兼容 vw

目前应用比较广的是px2rem，随着浏览器对viewport的支持，但未来趋势是px2vm，用vm代替rem，但要兼容就大乱炖啥都要，，，
很多技术站都提供了兼容插件，比如postcss-cssnext, postcss-viewport-units, viewport-units-buggyfill。
不同的前端框架vue/react，配合webpack/grund等打包工具，可以更高效的使用这些插件，完成移动端适配的配置工作。
【传送门】
Amfe阿里前端团队一直都对这方面的技术做了非常好的研究，还提供了开源的代码：https://github.com/amfe/lib-f...
大漠写的非常详细的博客：使用Flexible实现手淘H5页面的终端适配，还有进一步讲vw的：再聊移动端页面的适配，如何在Vue项目中使用vw实现移动端适配。向大牛献上一份膝盖～～～

4. 推荐插件

主要的插件都是基于PostCss的，千万不要去百度PostCss，要不然从当前坑还没爬出来，又会发现另一个坑，，，

px2rem或postcss-px2rem：将css中px编译为rem，配合js根据不同的dpr，修改meta的viewport值和html的font-size

postcss-px-to-viewport：将css中px编译为vm

postcss-aspect-ratio-mini：用来处理元素容器宽高比，针对img、vedio和iframe实现更好的长宽比

postcss-write-svg：解决1px问题（移动端css里面写了1px, 实际看起来比1px粗），自动生成border-image或者background-image的图片

viewport-units-buggyfill：实现各个浏览器viewport的兼容

postcss-viewport-units：给CSS的属性添加content的属性，配合viewport-units-buggyfill库给vw、vh、vmin和vmax做适配的

加油吧～少年～

私有云服务器托管移动端适配移动端适配方案移动端适配 js 回调的原理、实现与应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96093.html

前端资源收集整理

摘要：工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。 Github版本：Front-End Resource Collection 前端相关资源汇总学习指导精华文章 Web前端的路该怎么走？：文章超长，但是干货超级多，值得反复精读！听说2017你想写前端？：适合于已经度过了小白阶...

awesome23 2019-08-20 18:23 评论0 收藏0
前端资源收集整理

摘要：工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。 Github版本：Front-End Resource Collection 前端相关资源汇总学习指导精华文章 Web前端的路该怎么走？：文章超长，但是干货超级多，值得反复精读！听说2017你想写前端？：适合于已经度过了小白阶...

antyiwei 2019-08-29 13:03 评论0 收藏0
前端资源收集整理

摘要：工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。 Github版本：Front-End Resource Collection 前端相关资源汇总学习指导精华文章 Web前端的路该怎么走？：文章超长，但是干货超级多，值得反复精读！听说2017你想写前端？：适合于已经度过了小白阶...

KavenFan 2019-08-01 17:16 评论0 收藏0
从零搭建移动H5开发项目实战

摘要：并且除了常用的端，还要考虑微信端，或者是端。所以我们要有一套机制，在端上走的代码，在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目，我总结了以上这些移动开发难点，希望之后的人能少踩点坑，站在我的肩膀上提高项目开发的效率和质量。从零搭建移动H5开发项目实战前端H5的前世今身在Pc的时代，前端技术无疑统治了大多数用户的交互界面！而在移动为王的今天，NA开发在早期占领了大多...

terro 2019-08-29 11:32 评论0 收藏0