您的位置：首页 > Web前端 > CSS

谈谈css王朝的px，em，rem之间的那些事儿

2016-03-14 17:04 609 查看

话说，CSS（层叠样式表）有常见的三个单位兄弟，px，em，rem，作为前端人员，跟着三兄弟之间打的交道也是比较多，现在我们来介绍一下，这三个兄弟吧……

1. px 常见老大，像素（Pixel），相对长度单位，是指相对于相识屏幕分辨率而言的，分辨率越高，像素点越小，反之，分辨率越低，点较大，比如说在800＊600的分辨率和1024*728的分辨率比较，在1024*768的分辨率下文字会显得小；

2. em 常见老二，相对长度单位，不同的是，它是相对于父容器而言的，会继承父级元素的字体大小，如果父容器都没有设置font－size的话，那么就是相对于浏览器而言，一般来说，浏览器同样没有设置字体大小的，默认字体大小为16px＝百分比为100%＝12pt，16px＝1em，10px＝0.625em（通过这个式子，所以很多地方你会看到font－size＝62.5％，就是这个原理，那么12px＝1.2em）；举一个例子吧：

body { font-size:62.5%; }

p { font-size: 1.2em; }

span { font-size: 1.5em; }

<body>我的字体为12px＝16px ＊ 62.5% ＊1.2em；我的字体是18px＝12*1.5px</body>

3. rem 常见老幺，相对长度单位，不过相对的是HTML根元素，换句话说，如果根元素的body值变化，那么整体都会变化（如果用rem为单位的话），同样以第二个例子说话，只是p跟span的元素单位em改为rem，则

<body>我的字体为12px ＝ 16px＊62.5%＊1.2rem；我的字体是15px＝16*62.5%＊1.5rem</body>

ps：在font设置时，我们会看到这么一行字，12px／1.5，意思是12px大小，行高1.5.

hello，今天的css单位三兄弟介绍就暂到这里了，如有建议，可以交流哈～～

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航