标签：目的 媒体查询 不可 默认 rem 布局 如何 父类 12px
rem是基于html定义的字体大小而决定，而em则根据使用它的元素的大小决定，很多人错误认为是根据父类元素，实际上是使用它的元素继承了父类的属性才会产生的错觉。
如何运用rem？
例如：在项目的公共样式文件初始化设置（屏幕大小对应的字体大小可以自行设置）
html {
font-size:16px;
}
@media(max-width:320px){
html{font-size:12px;}
}
@media(min-width:365px){
html{font-size:20px;}
}
然后在下面比如设置p标签的字体大小：
p{
font-size:2rem;
}
如果移动端屏幕最大是320px，那么p标签的字体大小就是12*2=24px；如果移动屏幕最小是365px，那么p标签的字体大小是20*2=40px
如何使用em？
em单位转为像素值，取决于他们使用的字体大小。此字体大小受父元素继承过来的字体大小，除非显式重写一个具体单位。
当使用em单位是，像素值将是em值乘以使用em单位的元素的字体大小。
例如：一个div有18px字体大小，10em将等同于180px；如果这个div包裹着p标签，设置p标签的字体大小是1.25em，那么该p标签的字体大小是18*1.25=22.5px。如果不想继承父级元素，可以显式设置p标签字体大小或者间距的固定值去覆盖。
如果没有设置HTML字体大小，那会直接用浏览器默认的字体大小。
总结：
不要在多列布局中使用em和rem，改用%；
不要使用em或rem，如果缩放会不可避免地导致打破布局元素；
媒体查询时使用rem
标签：目的 媒体查询 不可 默认 rem 布局 如何 父类 12px
原文地址：https://www.cnblogs.com/xiao-xiang77/p/10255599.html
