【css】---rem 单位换算---
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
body{ margin: 0; padding: 0;}
/*html{font-size: 32vw;}
div{ height: 0.37rem; background: red; color: #fff; font-size: 0.15rem; text-align: center; line-height: 0.37rem;}*/
div{ width: 375px; height: 200px; background: red;}
</style>
</head>
<body>
<div>拉钩网</div>
<!--
常用的是px，固定数据
% 相对单位
em em一个相对单位，相对于父元素的字号大小 默认情况下16px=1em
rem root em rem一个相对单位，相对于根元素html的字号大小 默认情况下 1rem=16px
vw viewport 视口 width 一个相对单位，相对于浏览器的窗口，默认情况下满屏的时候是100vw。
vh
vmin
vmax
就是写页面我们现在全部用rem，ps测量的单位是px，而rem的换算html的设置得是vw。
html{font-size： vw；} rem px vw之间3个单位的换算比例是什么？
已知：
1）默认情况下，1rem=16px
2）假如是750的设计图，浏览器解析的宽度是375px ，所以100vw=375px 1vw=3.75px
根据已知：1rem=16px 1vw=3.75px 1rem=16px= 4.27vw
比如设计图直接测量的数据是32px，因为dpr是2，所以写像素就是16px，最终代码写的是1rem。同时html{font-size:4.27vw;}
得出来的1rem=16px= 4.27vw只有在刚刚的已知条件都成立的时候，才是这样的比例。
但是最终的4.27vw数据不准确，所以
已知条件做一下修改：
1）假设 1rem=120px
2）假如是750的设计图，浏览器解析的宽度是375px ，所以100vw=375px 1vw=3.75px
根据已知：1rem=120px 1vw=3.75px 1rem=120px= 32 vw
比如设计图直接测量的数据是32px，因为dpr是2，所以写像素就是16px，最终代码写的是0.14 rem。同时html{font-size:32vw;}
已知条件做一下修改：
1）假设 1rem=100px
2）假如是1080的设计图，浏览器解析的宽度是414px ，所以100vw=414px 1vw=4.14px
根据已知：1rem=100px 1vw=4.14px 1rem=100px= 24.15vw
比如设计图直接测量的数据是33px，因为dpr是3，所以写像素就是11px，最终代码写的是0.11 rem。同时html{font-size:24.15vw;}
-->
</body>
</html>
浙公网安备 33010602011771号