文档章节

讲解css单位px、em、rem的含义

浮躁的码农
 浮躁的码农
发布于 2016/02/24 10:10
字数 779
阅读 139
收藏 4

一、首先介绍一下px

   px就是css中最基本的长度单位了,用px做单位基本上没什么问题,可以做到让页面按套路精确的展现
   px是相对于显示器分辨而言的
   如果全篇用px布局会暗藏一个蛋疼的问题,就是当用户用ctrl滚页面的时侯(说白了就是ctrl+,ctrl-),你会发现页面结构产生了不可预知的错乱,因此有砖家倡导使用em替代px....

二、接下来介绍一下em

   如果你从上到下阅读批文,你应该已经知道了em出现的原因,下面说说em的特性,简单的讲px是绝对单位,1px就是1px,2px就是2px,以此类推,而em是相对单位,em是相对的基准点就是浏览器的字体大小,浏览器默认字体大小是16px,也就是1em默认等于16px,如果你想给某个文字设定为14px,就这样写font-size:0.875em;样式表都用em来写的话,就可以解决ctrl+,ctrl-时造成的页面错乱问题。
   这时侯有人就会抱怨了,数学是体育老师教育的,除以16我怎么可能算明白,那好办,你可以在根节点上重定义基准号html{font-size:62.5%},此时页面基准字号就是16px*62.5% = 10px,那么此时1em=10px,那么些时14px = 1.4em依此类推


   但是,问题又来了,em准确的说是相对于父节点的字号来计算的,如果自身定义了字号那么就相对自身字号来计算,举例如下:
    html { font-size:100%}
    .box-0 {
         height:1em;//此时height等于16px;
     }
    .box-1 {
        font-size:0.625em;//此时基准字号以变更为16*0.625=10px
        height:1em;//此时实际height等于10px;
    }
    看明白了吧,整个页面内1em并不是一个固定不变的值,1em不停的变换,再加上数学是体育老师教的,这不是自作孽吗。。。没关系,css3为我们引入一个新的单位就是rem可以解决这个问题

三、最后介绍一下主角rem

    rem与em一样也是一个相对单位,为了方便理解,我们就理解rem为root em顾名思义rem只相对跟节点计算,这就是说只要在根节点设定好参考值,那么全篇的1rem都相等,计算方式同em,默认1rem=16px;同理你可以设定html{font-size:62.5%}那么1rem就等于10px,以此类推
   声明一下:rem是css3属性,没错!这就是说ie678不支持rem属性,只有chrome、firefox等高富帅支持。那么我们就在ie678中用px做兼容处理,例如:
   .box {
      font-size:14px;
      font-size:0.875em;
   }

© 著作权归作者所有

共有 人打赏支持
浮躁的码农

浮躁的码农

粉丝 64
博文 745
码字总数 145372
作品 0
松江
程序员
彻底弄懂css中单位px和em,rem的区别

rem:rem一般用于设置字体的大小,1rem就是html根元素的字体大小,2rem就是html字体大小的2倍,1.5rem是html字体的1.5倍,0.75rem则是html字体大小的四分之三,依此类推。 因此,rem是一个相...

hhj187
2016/08/24
11
0
HTML&CSS基础学习笔记1.29-像素和相对长度

像素和相对长度 前面的html博文,我们提到过用属性width、height来设置图片的尺寸,它们的单元都是”px(像素)”。 长度单位总结一下,目前比较常用到px(像素)、em、% 百分比,要注意其实...

MayaTeacher
2016/09/15
10
0
CSS3的REM设置字体大小

在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs....

张涛泽
2017/04/19
0
0
css3 px、em和rem

1、先观察关系的转换(http://pxtoem.com/) em优缺点 1. em的值并不是固定的; 2. em会继承父级元素的字体大小。 所以我们在写CSS的时候,需要注意两点: 1. body选择器中声明Font-size=62....

zwjjap
2015/10/08
69
0
说说css中pt、px、em、rem都扮演了什么角色

前段时间,终于仔仔细细的把pt、px、em、rem了解了一遍,简单整理了一下做个记录。 pt、px、em、rem都是什么 pt单位名称为点(Point),绝对长度单位。现在网页中出现得很少甚至不出现,常用...

郑乔尹在旅游
2017/11/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

发生系统错误 5 拒绝访问

1、使用命令net start *开启一个服务的时候,出现发生系统错误5,拒绝访问。 解决:切换到管理员模式执行此命令即可。

fang_faye
3分钟前
0
0
devops 成长路线

https://36kr.com/p/5157249.html

swingcoder
15分钟前
0
0
Java内存区域的划分和异常

行时数据区域 JVM在运行Java程序时候会将内存划分为若干个不同的数据区域。 程序计数器 线程私有。可看作是当前线程所执行的字节码的行号指示器,字节码解释器的工作是通过改变这个计数值来读...

架构师springboot
17分钟前
0
0
kubeadm 安装kubernetes1.12.1

准备环境 服务器 服务器情况: IP 系统版本 角色 Hostname 10.20.13.24 Centos7 64位 minimal master kuber24 10.20.13.25 Centos7 64位 minimal work Kuber25 10.20.13.26 Centos7 64位 mi......

hgfgoodcreate
20分钟前
2
0
腾讯又添 AI 开源项目! 腾讯 AI Lab 正式开源业内最大规模多标签图像数据集

2018年10月17日,腾讯AI Lab宣布正式开源“Tencent ML-Images”项目,地址为https://github.com/Tencent/tencent-ml-images。该项目由多标签图像数据集ML-Images,以及业内目前同类深度学习模...

腾讯开源
27分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部