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

2024年1月6日 145次阅读 来源: JenniferTong

简介

【目标】：前端开发移动端及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做适配的

加油吧～少年～

    原文作者：JenniferTong
    原文地址: https://segmentfault.com/a/1190000015619303
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞