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，那这个宽度就是20px
• rem：相对于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键就可以了

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