摘要：不同的前端框架，配合等打包工具，可以更高效的使用这些插件，完成移动端适配的配置工作。
简介
【目标】：前端开发移动端及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 转 remcss3的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等问题
目前应用比较广的是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实现移动端适配。向大牛献上一份膝盖～～～
主要的插件都是基于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做适配的
加油吧～少年～
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/96093.html
摘要：并且除了常用的端，还要考虑微信端，或者是端。所以我们要有一套机制，在端上走的代码，在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目，我总结了以上这些移动开发难点，希望之后的人能少踩点坑，站在我的肩膀上提高项目开发的效率和质量。 从零搭建移动H5开发项目实战 前端H5的前世今身 在Pc的时代，前端技术无疑统治了大多数用户的交互界面！而在移动为王的今天，NA开发在早期占领了大多...
阅读 1789·2021-11-18 13:21
阅读 1930·2021-10-18 13:30
阅读 1495·2021-10-12 10:13
阅读 878·2021-10-09 09:43
阅读 5341·2021-09-22 15:13
阅读 3536·2021-08-11 10:22
阅读 914·2019-08-30 13:46
阅读 3505·2019-08-30 13:21
