关于px em rem的一点小总结

CSS单位解析

最新推荐文章于 2022-10-18 16:42:02 发布

转载最新推荐文章于 2022-10-18 16:42:02 发布 · 112 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hamsterPP/p/5002116.html

本文详细解释了CSS中的不同单位，包括像素(px)、em、pt、pc、rem等，并介绍了它们的特点及应用场景。同时，还提供了如何在实际项目中合理利用这些单位的方法。

2015-11-28

06:06:40

概念

都是CSS单位。

px:像素 Pixel。像素 (计算机屏幕上的一个点)

em:1em 等于当前的字体尺寸。 2em 等于当前字体尺寸的两倍。例如，如果某元素以 12pt 显示，那么 2em 是24pt。如未人为设置字体尺寸，那么1em=16px这个所有浏览器默认的字体高。

pt:磅 (1 pt 等于 1/72 英寸)；

pc:12 点活字 (1 pc 等于 12 点) rem:

特点

px:

使用px作为单位的字体的，部分浏览器无法调整；而em rem则可以比较好的适应

Firefox能够调整px和em，rem

em:

由于默认1em =16px，所以为了方便计算，一般在body里声明：font-size:62.5%,这样一来，1em=10px,2em=20px,只要将原来的px数值除以10，就换算成em单位了。

em的值是相对于父级元素的字体大小，如果父级元素的字体大小改变了，那么em的值也会改变，所以麻烦在于：em要经常人为换算。

例如：

.d1{ font-size: 2.2em;}
.d2{ font-size: 2.2em;}

<div class="d1">
    dddd地道道的
    <div class="d2">dddd反复复</div>
</div>

那么实际显示出来，d1的字体为35.2px,d2的字体则为35.2*2.2=77.44px，需要将d2的字体设置为1em，才与其父元素相同是35.2px

ps：谷歌浏览器最小字体12px，所以不管是用px，亦或是em设置成10px,都会显示成12px的大小

rem

相对单位，root element，相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

如何用rem

可以引入 CSS 预处理工具（Sass、LESS 、Stylus等）自动计算 rem 值，这里就不一一举例了
没有SASS的情况下，改html 的默认字体大小，写入font-size:62.5%，即10px.

但为了兼容不支持rem的浏览器，需要在写rem的单位前面写上px单位，这样不支持rem的浏览器就可以优雅降级。例如： 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; }

PS：关于谷歌最小12px的问题

我本人测试，关于em,如果在父元素设置了font-size:62.5%,父元素的字体最终显示12px.但其子元素如果设置2em,最终显示为20px,即依旧以10px作为基准的。

关于rem,如果在html设置font-size:62.5%；body中的其他元素设置字体1rem,最终显示为12px;设置2rem,显示20px;设置2.2rem,显示22px;

其他浏览器未测试。

动态计算获取html的font-size

页面基准320px(20px),html font-size值的计算：

var ele=document.getElementsByTagName("html")[0],  
 size=document.body.clientWidth/320*20;  
ele.style.fontSize=size+"px";

其他单位

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。 vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。 vmin：vw和vh中较小的那个。 vmax：vw和vh中较大的那个。

em rem的用处

开发响应式网页设计、设置网页字体大小自适应

转载于:https://www.cnblogs.com/hamsterPP/p/5002116.html