1.首先，看看网上关于手机适配的解释

先说说手机页面适配，rem和大众适配方案！

基点：相对于根节点字体的rem大小。所以不要用px；

根字体：字号px；

Px:把它想象成类似cm的东西；

基准：750设计稿；

这是方案的基本理论，在这个基础上，我们需要明白我们应该怎么做！

目标1。手机适配：页面上的大小，无论高度、宽度、字体，都会随着屏幕的宽度而变化！这是屏幕宽度！你想到大众了吗，是的，就是这个意思；——在所有尺寸的屏幕上最大限度地恢复设计草图

目标2: px转换成rem:一般UI给出的设计稿宽度是750，所以我们想直接写上面UI标记的大小；——最小化工作量

为什么是雷姆？

很久以前没有大众，还有雷姆；因为大众的兼容性而被使用。即：rem的兼容性和大众的兼容性；

另一个是写自己的百分比并不优雅

一、理论基础！

实现目标一

就用雷姆吧！由于rem可以随着字根大小的变化而变化，因此实现了自适应功能。

但是，但是，重点是，如果，根字体的大小是16px默认情况下；然后，我们的1rem；总是16px，好吗？也就是说，如果设计稿是750(翻倍，iphone是375pt)，我们想要50%大小的：

50%*357px/16=11.718rem

但是，如果我们写一个11.718rem的宽度，这只能还原iphone6上的设计稿，也就是说，iphone6上只有这个宽度刚好是一半；

那么问题来了。如果每个屏幕都是50%，只需更改根字体大小(16px)。11.718rem永远不变11.718rem，不用担心；

实现目标二，

使用工具，webpack，postss，postss-pxtorem

第二，准备主要工具！

Viewport:自行推荐百度；

meta name=' viewport ' content=' width=device-width，initial-scale=1，maximum-scale=1' vue-cli:主要使用webpack，大大降低了使用webpack的难度。快速构建前端项目。

Postcss:官网解释：Postcss是一个用js插件转换样式的工具是postcss使用JS插件帮助你转换css样式的工具。例如，在这里，用1rem替换文件中的16px(根大小默认为16px)；所以你不用自己动手！

postss-pxTO REM : postss的一个插件主要是帮你把PX转换成对应的REM；

然后：用js代码动态计算根目录应该有的字体大小。反正是动态获取屏幕宽度的js代码！

第三，rem——开始工作！

第一步是用vue-cli快速构建一个项目，然后安装postss、postss-pxtorem、postss-loader、postss-import、postss-URL；

第二步：添加文件。项目根目录中的postcssrc.js，并在其中写入

module . exports={ plugins : { ' postss-pxtorem ' : { root value : 32，proprist :[' *]，minPixelValue: 2 } }RootValue，其中根目录的字体大小是32px，为什么这里设置为32？因为一般设计稿是750，是iphone6的两倍大，所以设置为16，也就是32pxProplist是那些需要转化为rem的属性，这是这里的全部意思；

比如可以选择设置；proprist :['字体'，'字号'，'行高'，'字母间距']

MinPixelValue是最小转换单位，也就是说最小转换单位是2px

第三步是动态设置根字号！头部插入一个简单的js；

(function(){ function autoRootFontSize(){ document . document element . style . font size=math . min(screen . width，document . document element . getboundingclientrect()。宽度)/750 * 32 ' px '；//取屏幕.宽度和文档的最小值。documentelement。getboundingclient()。宽度；除以750，再乘以32；了解起点，即原尺寸750 32px如果屏幕尺寸变成375px，那么字体就是16px也就是说，根字体fontSize的大小与屏幕大小成比例变化！是不是很简单} window . addevent listener(' resize '，autorootfontsize)；autoRootFontSize()；})();这里我想说的是，你可以用vw来设置根字号，26px/375 px=4.267 VW；你不需要js来忘记它！

html { font-size 3:4.267 VW }；//因为这个字体大小和屏幕完全成正比；

第四，vw——开始工作！

大众方案就简单多了，因为大众是屏幕的百分比，所以我们不需要动态改变根字体的大小，只需要把750上的px大小转换成对应的大众值，这一步就可以交给postcss工具了！

所以只需要两步！

第一步是用vue-cli快速构建一个项目，然后安装postss、postss-pxtorem、postss-loader、postss-import和postss-URL

第二步：添加文件。项目根目录中的postcssrc.js，并在其中写入

module . exports={ ' plugins ' : { ' postss-import ' : { }，' postss-URL ' : { }，' postss-长宽比-mini': {}，' postss-write-SVG ' : { utf 8: false }，' postss-CSS next ' : { }，' postss-px-to-viewport ' : { viewport width 33330 }忽略“，”。发际线']，minPixelValue: 1，mediaQuery: false }，postss-viewport-units ' : { }，}} viewport width是您的设计草图的大小750，那么unitPrecision是为大众值保留的小数点位数；

动词（verb的缩写）总结！

首先要明白一件事：px就像cm，1px永远是1px；1cm总是1cm；

那么让我们从目标中推出一个逻辑：

我们想要的结果很简单。一个元素的宽度(px)/屏幕宽度(px)=一个固定值(这个固定值是设计草图上的值比例固定值)；

——所以我们要做的就是加宽屏幕，加宽元素宽度。

但是我们写的代码中的px是不可能改变的(取750设计稿以上的尺寸)；那么postcss编译的rem值也是不变的；

如何将设计稿中的40px转换成相应的rem？只需记住根字体大小(浏览器默认为16px，现在设置为32px)的值为1rem；这个交给工具进行同样的计算；

Get:元素(px)的宽度=元素(rem)的宽度： heavy _乘法_ x:32因此，这个32必须在postss-pxtorem中设置；这样可以帮你计算；

又因为：元素宽度(rem) : heavy _乘法_ x:根字号(px)=元素宽度(px)

元素(px)的宽度变大，元素(rem)的宽度保持不变，所以只有根字体大小(px)发生变化，变大；如何更改细节，上面的js代码已经解释过了；

——所以我们要做的是加宽屏幕，加宽根字体大小(px)，加宽元素宽度。

750屏幕下写的样式大小是1:1，所以

而且因为我们想要：根字体大小(px)/屏幕宽度(px)=32/750

因此：根字体大小(px)=32/750 : heavy _乘法_ x:屏幕宽度(px)

元素宽度(px)/屏幕宽度(px)=固定值

根字号(px) : heavy _乘法_ x:元素宽度(rem)/屏幕宽度(px)

32/750 : Heavy _乘法_ X3360屏幕宽度(px) : Heavy _乘法_ X:元素宽度(rem)/屏幕宽度(px)等于多少？

你得到的是一个与屏幕大小无关的常量值！

简化：元素宽度(REM) : Heavy _乘法_ X336032/750=元素宽度(px)/750 ——不是设计稿上面的比例！

验证上述操作的结果是否符合预期也非常简单：

例如，img的宽度和高度，以及iphone6上的大小(检查元素的大小！Px单位):

根字体：16pxpostcss计算的rem值为2.5rem2.5

16=40px其实也是40px

——元素实际大小为40:Heavy _乘法_ X336040 (PX)，屏幕宽度为375。比值为40/375=0.10667；

iphone5上的大小(检查元素的大小！Px单位):

13.6533=34.13px其实也是34.13px

在——中，元素的实际大小为34.13: heavy _乘法_ x:34.13 (px)，屏幕宽度为320。比值为34.13/320=0.10665；

2、自身项目适应配置(实践)

上一篇文章提到的理论和方法是可行的，他自己的项目的解决方案和他的类似(主要使用rem):

1.插件：amfe-灵活的postss-px rem

Amfe-flexible:根据不同的设备自动改变data-dpr的值，这样可以根据不同的data-dpr设置不变的字体大小，只是放大相应的倍数。

postcss-px2xrem:打包时，将项目中的px统一转换为rem，转换后的参考值根据配置进行设置(. postcssrc.js)

/因为我是基于750px(iphone6)的宽度，所以remUnit是37.5/

测试结果：

postss-px2xrem:只负责根据基准值将项目中的px转换为rem，不负责计算根节点的动态字号。

比如代码中有一个固定的高度：180px，参考值是37.5，那么最终界面上rem=180/37.5=4.8rem

不管客户端手机不同，分辨率不同，界面固定为4.8 REM[REM的值是固定的，界面上显示的px根据根节点的字体大小不同]，界面上显示的PX为16(未设置字体大小默认为16 PX)* 4.8 REM=76.8 PX。

[那么这个基准值：37.5是怎么来的：

Rem参考值计算

关于rem的基准值，也就是上面的37.5px，其实是根据我们得到的目测稿确定的，主要有以下几个原因：

1.由于我们写的页面是要在不同屏幕大小的设备上运行的，所以我们在写风格的时候首先要用某个屏幕作为参考，这是由我们得到的视觉稿决定的；如果我们得到的视觉草稿是以iphone6的屏幕宽度=375px为基准：

var Docel=document . document element；var width=Docel . GetBoundingClientRect()。宽度；var rem=宽度/10；这样算出来的rem基准值是37.5(iPhone 6的可视化版本)。为什么要在这里除以10？其实这个值是随便定义的，因为你不希望html的字号太大，当然可以选择不除，只要你以后计算动态js的时候保证值一样就可以了。

以上组件只负责转换rem，字体大小不根据不同设备设置。然后添加此组件amfe-flexible:

不同设备下字体大小不同。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。