CSS尺寸 rem与em原理与区别（二）

一 css 中单位rem与em区别：https://www.cnblogs.com/wind-lanyan/p/6978084.html

在css中单位长度用的最多的是px、em、rem，这三个的区别是：

1. px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
2. em：子元素字体大小的em是相对于父元素字体大小；元素的width/height/padding/margin用em的话是相对于该元素的font-size
3. em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
4. 总结：em相对于父元素，rem相对于根元素。rem中的r意思是root（根源），这也就不难理解了。

 

二 rem布局原理：https://zhuanlan.zhihu.com/p/30413803

rem布局的本质是等比缩放；rem是弹性布局的一种实现方式，弹性布局可以算作响应式布局的一种，但响应式布局不是弹性布局，弹性布局强调等比缩放，100%还原；响应式布局强调不同屏幕要有不同的显示，比如媒体查询。

rem缺点:

1. 针对大屏用户可以自己选择是要更大字体，还是要更多内容，一旦使用了rem，就剥夺了用户的自由。所以一般内容型的网站不适合使用rem。
2. rem需要换算，可以使用vw和vh，但是CSS3中这两个新属性兼容性没有rem好。
3. 字体的问题，字体大小并不能使用rem，字体的大小和字体宽度，并不成线性关系，所以字体大小不能使用rem。

em：做弹性布局缺点：一旦某个节点的字体大小发生变化，那么其后代元素都得重新计算。

 

 三 rem与px之间换算规则：

em和px的之间的相互转换： 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。 为了使用方便，用em时，我们通常在CSS中的body选择器中声明font-size=62.5%（使em值变为 16px*62.5%=10px）, 之后，你只需要将你使用的px值除以10，即可得到em值，如：12px=1.2em, 10px=1em。

在项目中一般可以通过媒体查询 和 JS通过检测屏幕大小改变根字体大小做适配处理：https://www.cnblogs.com/zyt-it/p/10177735.html

 

四 禁用用户缩放设置：

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

content属性值 :
width:可视区域的宽度，值可为数字或关键词device-width
height:同width
intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no 禁止缩放