【手艺】挪动端适配 px2rem/px2vw 的道理与完成

2023年5月24日 267次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞