前端界面开发大小单位 px rem em的思考记录

Posted 2020-11-21 linxihuang

前端界面开发表示大小的单位有 px、rem、em。这三种有什么区别呢？px指像素值，固定大小，较好理解。rem、em的区别呢？em是针对body中的font-size的倍数，rem是针对html的倍数。

1、em
em是针对body中font-size的倍数，font-size默认是24px
例：
body{font-size:62.5%;}
则：1em=10px
2、rem
rem是针对html的倍数
html {font-size: 62.5%; /**10 ÷ 16 × 100% = 62.5% 1rem = 10px **/}
body {font-size: 1.4rem; /**1.4 × 10px = 14px **/}
h1 { font-size: 2.4rem; /**2.4 × 10px = 24px**/}
3、px
4、line-height带单位和不带单位的区别
line-height:30px;
line-height:120%;
line-height:1.2
1）line-height:120%;代表行高为 父级元素.font-size*120%
2)line-height:1.2; 代表行高为 子级元素。font-size*1.2

移动端字体大小、margin、padding大小调节
传统做法：
将设计图缩放到320px，然后设置字体为rem，margin、border为px。（原因：margin、borer、padding为rem单位，换成px和原始数值有插入
改进后做法：

设计图 640px ，定义body的width是6.4rem；font-size通过deviceWidth/6.4得到。
设计图750px ，定义body的width是7.5rem；font-size通过deviceWidth/7.5得到。

deviceWidth可以通过document.documentElement.clientWidth可视宽度来获取。那计算font-size的代码如下：（7.5代表设计图为750px)
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + ‘px‘;
取100px为一个参照，之后的都是 长度/100rem
例：设计图为750px
则 body中的width为 7.5rem
font-size=deviceWidth/7.5=750/7.5=100 px=1rem
设计图为640
取100px为一个参照
则body中的width为6.4rem
font-size=1rem

上面代码其实我和之前代码是大体类似的。也是设置rem跟字体，以750宽度为基准，为100px,375宽度是50px。