em,rem,px,rpx,%区别

px,%是布局常用单位，

em是相对于父元素的font-size而定的，

比如谷歌浏览器font-size是16px,则div直接显示时是1em=16px,

当

<div class="parent">
    <div class="son">111</div>
</div>

<style>
.parent{
    font-size:50px;
}
.son{
    width:1em;
    height:1em;//此时1em=50px,即父元素的font-size大小
}
</style>

 

rem针对于根元素html的font-size而言

当设置html的font-size后，1rem相应改变，1rem = htmlFontSize

 

Px像素。类似绝对单位。其实也是相对单位，相对于屏幕的分辨率；
Pt磅 点 打印的尺寸
Em 相对单位，相对于父级的font-size 1em=父级的font-size（直接的父级）
Rem相对单位，相对于根元素的font-size 1rem=根元素的font-size
Vw，相对于屏幕的宽度 ，1vw1%屏幕的宽度
Vh 相对单位，相对于屏幕高度，1vh1%屏幕的高度

Meta标签的设置不同

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 

width=device-width:宽度等于当前设备的宽度
intial-scale:页面首次被显示是可视区域的缩放比例，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no 禁止缩放
————————————————
版权声明：本文为CSDN博主「从0到1，从1到0」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43668201/article/details/98608442