什么是REM首先了解一下CSS中一些常见的长度单位：px绝对长度单位，pixel注：浏览器（Chrome）默认的文字大小为16px，可以被设置的最小单位是12pxem相对长度单位，代表元素的font-size的计算值。如果用在font-size属性本身，它将继承父元素的font-size。如果元素的font-size为16px，元素的宽度设置为width=10em，则width=10em=160px；如果元素的父元素的font-size为12px，元素的font-size设置为font-size=2em，则元素的font-size=2em=24px；1em可以通俗的理解为一个汉字的宽度。REM相对长度单位，这个单位表示根元素的font-size（比如元素的font-size）。例如，如果根元素的字体大小是16px，那么1rem=16px。vh相对长度单位，视口高度的1/100。vw相对长度单位，视口宽度的1/100。一般来说，REM是根元素的font-size的长度单位，也是移动端适配的解决方案之一。DynamicREM随着移动设备越来越多，屏幕的大小也各不相同。那么如何为页面编写CSS呢？以下是几种移动端适配方案：为每个设备尺寸自定义一套CSS缺点：工作量大，使用responsive不切实际缺点：需要区分多个尺寸段，开发效率不高使用百分比布局缺点：宽度和高度不容易确定。vw/vh方案元素的宽高使用vw/vh长度单位，与设备视口的宽高有关缺点：兼容性有问题。REM方案的所有单位都基于设备宽度。使用JS将页面宽度转换为根元素的font-size，然后使用根元素的font-size关联的rem单位来定义元素的宽高，相当于间接使用rem与页面宽度相关，确定比例，实现比例缩放。代码演示：在这种情况下，当我们需要在带有屏幕宽度为720px当显示一个宽度为50%，高度为25%的元素时，我们可以给这个元素添加样式：.ele{width:5rem;/*原始尺寸360px/根元素font-size72px*/height:2.5rem;/*原始大小180px/根元素font-size72px*/}优化REM由于转换px和rem太麻烦，可以使用Scss函数自动转换px单位。scss安装和使用npmconfigsetregistryhttps://registry.npm.taobao.org/touch~/.bashrcecho'exportSASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"'>>~/.bashrcsource~/.bashrccnpmi-gnode-sassmkdir~/Desktop/scss-democd~/Desktop/scss-demomkdirscsscsstouchscss/style.scssstartscss/style.scssnode-sass-wrscss-ocss编辑scss文件css文件px2rem将自动添加到scss文件中：@functionpx($px){@return$px/$designWidth*10+rem;}$designWidth:640;//640是设计稿的宽度，你要按照设计稿的宽度填写。//$designWidth:$(window).width()css获取屏幕宽度.child{width:px(320);高度：px(160)；保证金：px(40)px(40)；边框：1px纯红色；向左飘浮;font-size:1.2em;}可以自动把px改成rem
