rem移动端和PC端，才能真正理解适配的本质，这里简单介绍一下；网上找不到主流android设备的数据表，所以以iphone为例：以iphone6为例：竖屏宽度为375，称为逻辑像素（有的地方称为独立像素）；750像素的垂直屏幕宽度称为物理像素，这是设备上的实际光点数。要知道屏幕是由一个个光点组成的；pixelsRatio(Asset)2x，即2倍，物理像素/逻辑像素；ppi：像素密度326，实际平方英寸内的光点数；数值越大，画面越细腻，但对cpu、电池等硬件要求越高；ppi大于163的屏幕被苹果称为视网膜屏。需要消化逻辑像素和物理像素的概念。css中的px其实对应的是逻辑像素。比如这里写width:375px，就是iphone6可以水平方向覆盖；特别提示，这里所有关于像素的概念与实际尺寸（英寸）关系不大。（比如iphone6的375看起来比部分android的360窄。)PC端没有那么复杂的像素比例关系，一切都是1:1:1；了解了这些像素之间的关系之后，问题就来了，如何在css中写一个size，这样就可以调整所有的尺寸和像素比例设备的显示饱和了，比如上面提到的375px，是否只显示屏幕横转占手机一半，换320宽手机是否溢出，有滚动条；识别单位rem简单介绍rem与px的转换关系：1rem=html的字体大小；例如：html{font-size:100px}，那么1rem就等于100px；方案出来了，所有单位都用rem，我们动态改变html的font-size；实现remplan的思路是（看不太清楚，看懂下面的例子再看思路）：首先有一个benchmark，比如iphone6的375，（为什么用375来举例，前面说了上面，我们写的css样式其实只是和逻辑像素有关，至于手机用几个光点渲染，那是它的事。）设置html的font-size为一个easy-to-计算100px等值，得到页面初始化和尺寸变化时的屏幕宽度（document.body.clientWidth），然后将这个值除以375得到一个比例，再乘以100px，最后得到值来替换html的字体大小。html的字体大小=(屏幕宽度/375)*100+'px';例如iphone6,body:{width:3.75rem};竖屏：html{font-size:375/375}*100+'px'，body的宽度为3.75*(375/375)*100=375px，满了；将屏幕横过来：html{font-size:667/375}*100+'px'，body的宽度为3.75*(667/375)*100=667px，又满了；实力总结目前移动端UI的设计稿是按照375iPhone6设计的，大部分都是2倍的图片，为了表现更多的细节，也就是750px宽的psd图片，设计的时候可以用375到100px前端适配方案。各种尺寸的psd上写一半的css就好了；rem适配方案确定按以下步骤实施：1、确定设计稿尺寸，375倍或320倍；2.在publicjs中添加方法：vardoc=document.docementElement;//减少dom操作resize(){//获取dom文档宽度varclientWidth=doc.clientWidth,htmlFontSize=doc.style.fontSize;//动态改变html的font-size，以320为例if(clientWidth<320){//设置边界值以防万一htmlFontSize='100px';}else(){htmlFontSize=clientWidth/320*100+'px';}}//检测屏幕大小变化，同步font-size，比如横竖屏切换时触发window.onresize=function(){resize()}；//触发调整大小（当页面初始化时）3。css中所有样式的单位都是rem，包括文字的大小。转换关系如下：例如：设计稿尺寸为640，font-size为20px，则将所有尺寸除以2，{width:3.2rem;font-sizee:0.1rem;}例如：设计稿尺寸为320，font-size为20px，则body{width:3.2rem;font-size:0.2rem;}比如：设计是375，那么resize()方法320要改成375，css写成body{width:3.75rem;font-size:0.2rem}。特别提醒：这种适配在pad横屏显示时超大，还是需要根据业务需要设置阈值；移动端图片适配除了rem的尺寸外，还需要根据不同尺寸的设备更换2x图和3x图。比如在pad上显示3x图像会更清晰。一般的解决方案是使用media媒体查询来替换背景图片；最近正在研究rem的缺陷。开发的时候遇到了rem的一个大坑，就是如果用户改变了手机的字体大小，而我们页面样式的宽度使用了rem，比如{width:1rem}，那么页面的宽度会加倍，导致页面乱了。.我还没有找到解决方案，最好避免先使用rem来表示宽度。webpack自动化代码还是px写的，打包后rem的输出，各有利弊。自己考虑一下；第一步安装npminstallpostcss-px2rempostcss--save第二步在webpack.base.conf.js中引入constwebpack=require('webpack')constpx2rem=require('postcss-px2rem')constpostcss=require('postcss')第三步在模块中添加如下代码插件：\[newwebpack.LoaderOptionsPlugin({vue:{postcss:\[require('postcss-px2rem')({remUnit:75,propWhiteList:\[\]})\]},})\]第四步在rules中添加如下代码，css我用的是sass，所以需要引入相应的loader，没有如果你不需要它，就需要写它。{测试：/\\.(css|less|scss)(\\?.\*)?$/,loader:'style-loader!css-loader!sass-loader!less-loader!postcss-loader'}`
