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

TiJay

简介

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

  1. dpr(设备像素比)
    css的像素px不等于设备像素/分辨率/各种值,css的px可以简单理解为虚拟像素,与设备无关,css的px需要乘dpr计算为设备像素;
  2. css3 的 rem,
    即“root em”,是相对于根元素<html>的font-size来做计算;
    配合js根据设备的dpr设置html的font-size=“XX”来实现等比缩放
  3. 基于 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使得显示时的页面宽度等于设备逻辑像素大小,移动端常用代码:

<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:

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,要不然从当前坑还没爬出来,又会发现另一个坑,,,

  1. px2rem或postcss-px2rem:将css中px编译为rem,配合js根据不同的dpr,修改meta的viewport值和html的font-size
  2. postcss-px-to-viewport:将css中px编译为vm
  3. postcss-aspect-ratio-mini:用来处理元素容器宽高比,针对img、vedio和iframe实现更好的长宽比
  4. postcss-write-svg:解决1px问题(移动端css里面写了1px, 实际看起来比1px粗),自动生成border-image或者background-image的图片
  5. viewport-units-buggyfill:实现各个浏览器viewport的兼容
  6. postcss-viewport-units:给CSS的属性添加content的属性,配合viewport-units-buggyfill库给vw、vh、vmin和vmax做适配的

加油吧~少年~

阅读 8.7k

前端工程化之路
只要投入时间,一切都很简单。

In me, past, present, future meet...

928 声望
68 粉丝
0 条评论

In me, past, present, future meet...

928 声望
68 粉丝
宣传栏