谈谈css中px,em,rem的区别

最新推荐文章于 2024-12-04 20:33:52 发布

原创最新推荐文章于 2024-12-04 20:33:52 发布 · 443 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #浏览器 #web前端 #字体 #布局

px 像素(pixel)

相对长度单位，相对于显示器屏幕分辨率而言。

特点：

IE无法调整以px为单位的字体大小
一部分用户仍在使用IE浏览器或者内核

一般使用px来设置文本，因为比较精确和稳定，但如果用户修改浏览器文本尺寸，会打破整个页面布局。这时候em出现了

em

相对长度单位，相对于当前对象内文本的字体尺寸。若没有设置对象文本的字体尺寸，则默认为浏览器字体尺寸。

特点：

em的大小并不是固定
em会继承父元素的字体大小

任意浏览器的默认字体尺寸为16px,没有经过调整的都符合：1em=16px。所以得出这样的计算公式：

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

注意：避免重复声明字体大小，因为em会继承父元素，使用时多注意些。

实在懒的换算啥的，也可查表对应查找：

换算表

rem(root em 根em)

相对长度，使用rem为元素设定字体大小时，仍然是相对大小，但相对的始终是HTML根元素。

特点：

响应式字体尺寸，用户改变浏览器字体尺寸，也不会影响页面布局。

例如：默认的html font-size=16px，我想设置为12px，只需：12/16=0.75rem

但总不见得每次要换算都拿个计算器啪啪啪的敲吧，对于我们懒癌患者来说当然是越简单越好啦。若你硬要口算，我也不拦着你，你开心就好，跳过以下。

只需要把font-size=10px，不就简单又快捷了嘛。

html{

font-size:62.5%; /* 10÷16=62.5% */

}

body{

font-size:12px;

font-size:1.2rem ; /* 12÷10=1.2 */

}

p{

font-size:14px;

font-size:1.4rem;

}

IE9/IE10在用于伪元素时或者使用字体简写声明时不支持rem
IOS Safari5.0-5.1虽然支持rem，但是在使用媒体查询时不支持rem。

注意：
具体选择什么字体单位主要由你的项目来决定，若用户群大多是最新版本的浏览器，那么推荐使用rem。若要考虑兼容性的话， IE9以上等浏览器是支持CSS3的，想要兼容IE低版本，那可以考虑针对IE9以下低版本浏览器，用px来实现。

最后提供一个换算工具：
px,em,rem转换地址

若有不足，欢迎指正。