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

时间 2019-11-06

标签技术移动适配 px2rem rem px2vw 原理实现栏目无线繁體版

原文原文链接

简介

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

dpr（设备像素比）
css的像素px不等于设备像素/分辨率/各类值，css的px能够简单理解为虚拟像素，与设备无关，css的px须要乘dpr计算为设备像素；
css3 的 rem，
即“root em”，是相对于根元素<html>的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，来实现不一样屏幕大小的响应式伸缩css

1. px 转 rem

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

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使得显示时的页面宽度等于设备逻辑像素大小，移动端经常使用代码：vue

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

deviceWidth=设备逻辑像素/(dpr * scale)；
dpr为固定值，高清屏通常为dpr=2，因此scale=1/dpr，js动态设置scale：html5

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老是指向那个最大/最小的屏幕长度java

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等问题react

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实现移动端适配。向大牛献上一份膝盖～～～webpack

4. 推荐插件

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

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作适配的

加油吧～少年～