rem移动端布局

rem移动端布局：

1、rem是CSS3新增的相对长度单位，是指相对于根元素html的font-size计算值的大小。简单可理解为屏幕宽度的百分比。

2、什么是dpr? dpr是屏幕像素密码比 计算：dpr=液晶屏幕px尺寸 / 物理尺寸（量多少就是多少） 常用的dpr有：dpr = 2，dpr=3 window.devicePixelRatio这个api可以获取到当前屏幕的dpr

3、区分css单位：

px:绝对尺寸 em:em：相对于字体单位来设置的，就是当前元素（父元素）的font-size，如果父元素font-size是20px， 给子元素设置1rem，那这个宽度就是20pxrem：相对于html元素的字体，rem布局，就是以rem为单位进行尺寸设置。 列：无论我们的网页运行在什么硬件上，都把跟字体设置成当前硬件的十分之一 UI稿尺寸750px 把root fontSize = 75px;1rem = 75px

具体使用：

1、写一段js代码： ndex.js

// 作用：重置html的font-size function resetRootFZ(){ // 获取html元素DOM对象 var oHtml = document.querySelector('html') // 获取html的总宽度 var w = oHtml.getBoundingClientRect().width // 设置根字体的大小等于html节点的宽度的十分之一 oHtml.style.fontSize = w/10 + 'px' } resetRootFZ() // 当window窗口尺寸变化时，重新设置根字体的大小 window.addEventListener('resize',function(){ resetRootFZ() });

2、在主html入口文件引入：

<script src="./index.js"></script>

操作完以上步骤，移动端rem就设置完成了！！

vsCode插件自动转成rem

1、在vsCode中下载插件：px-to-rem 2、点击设置，找到扩展设置，设置成75就可以了 3、使用快捷键将px转成rem，Ait键 + Z键就可以了

结尾：直男直接上方法，简单方便好用。