文档章节

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

浮躁的码农
 浮躁的码农
发布于 2016/02/24 10:10
字数 779
阅读 131
收藏 4
点赞 1
评论 0

一、首先介绍一下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;
   }

© 著作权归作者所有

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

浮躁的码农

粉丝 58
博文 714
码字总数 141530
作品 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
CSS3的REM设置字体大小

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

张涛泽
2017/04/19
0
0
HTML&CSS基础学习笔记1.29-像素和相对长度

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

MayaTeacher
2016/09/15
10
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
px,em,rem,vw单位在网页和移动端的应用

px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来 它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度、比例有可能会不同...

刘元兴
2017/05/18
0
0
理解css中的长度单位

很基础的一个问题,但是,其实看起来很复杂的样子~~我们来捋一捋吧~~ css3中也对css中用到的单位进行了改进,单位也就是那几个,所以我们要搞清楚再用。 %——百分比 in——寸 cm——厘米...

哈狮子
2016/10/18
3
0
CSS3中的rem值与px之间的换算

看CCS文件的时候发现引入了一个新大小单位:rem,CSS文件里有介绍,看半天拿着手机计算了几下愣是没搞明白,怕是新东西搜出来的都是英文看着累就没找google,而是百度了一下,百度的结果就是...

前端_牛牛
2016/01/20
1K
0
css 单位

css 尺寸单位 绝对长度 绝对长度单位是一个固定的值,它反应一个真实的物理尺寸。绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等)。 px(pixel)像素,绝对单位,p...

w-rain
2016/08/19
63
0
7个你可能不认识的CSS单位

众所周知CSS技术我们虽然很熟悉,在使用的过程却很容易被困住,这让我们在新问题出现的时候变得很不利。 随着web继续不断地发展,对于新技术新解决方案的要求也会不断增长。因此,作为网页设...

WolfX
2016/02/17
8
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Akka构建Reactive应用《one》

看到这Akka的官网,描述使用java或者scala构建响应式,并发和分布式应用更加简单,听着很高级的样子,下面的小字写着消息驱动,但是在quickstart里面又写容错事件驱动,就是这么钻牛角尖。 ...

woshixin
10分钟前
0
0
ffmpeg源码分析 (四)

io_open 承接上一篇,对于avformat_open_input的分析还差其中非常重要的一步,就是io_open,该函数用于打开FFmpeg的输入输出文件。 在init_input中有这么一句 if ((ret = s->io_open(s, &s-...

街角的小丑
11分钟前
0
0
String,StringBuffer ,StringBuilder的区别

不同点 一、基类不同 StringBuffer、StringBuilder 都继承自AbStractStringBuilder,String 直接继承自 Object 2、底层容器“不同” 虽然底层都是字符数组,但是String的是final修饰的不可变...

不开心的时候不要学习
26分钟前
0
0
nodejs 文件操作

写文件code // 加载文件模块var fs = require("fs");var content = 'Hello World, 你好世界!';//params 文件名,内容,编码,回调fs.writeFile('./hello.txt',content,'utf8',function (er......

yanhl
29分钟前
0
0
SpringBoot mybits 查询为0条数据 但是在Navicat 中可以查询到数据

1.页面请求: 数据库查询: 2018-07-16 17:56:25.054 DEBUG 17312 --- [nio-9010-exec-3] c.s.h.m.C.selectSelective : ==> Preparing: select id, card_number, customer_id, customer_nam......

kuchawyz
39分钟前
0
0
译:Self-Modifying cod 和cacheflush

date: 2014-11-26 09:53 翻译自: http://community.arm.com/groups/processors/blog/2010/02/17/caches-and-self-modifying-code Cache处在CPU核心与内存存储器之间,它给我们的感觉是,它具......

我叫半桶水
41分钟前
0
0
Artificial Intelligence Yourself

TensorFlow是谷歌基于DistBelief进行研发的第二代人工智能学习系统,其命名来源于本身的运行原理。Tensor(张量)意味着N维数组,Flow(流)意味着基于数据流图的计算,TensorFlow为张量从流...

孟飞阳
53分钟前
0
0
press.one个人数字签名

这是我在press.one的数字签名 https://press.one/p/address/v?s=9d3d5b7ce019af357ab994775549e8f047a5b17fc9893364652fc67e4b95443b38ccb24c6655e0d252dd0154369eb9b7717c4ccf4e1835ca3596......

NateHuang
56分钟前
1
0
Oracle 中的 SQL 分页查询原理和方法详解

本文分析并介绍 Oracle 中的分页查找的方法。 Oracle 中的表,除了我们建表时设计的各个字段,其实还有两个字段(此处只介绍2个),分别是 ROWID(行标示符)和 ROWNUM(行号),即使我们使用...

举个_栗子
今天
4
2
C++ iostream、iomanip 头文件详解

大家好,我是ChungZH!这是我的第二篇博客。在这篇博客中,我将介绍一些有关C++的iostream和iomanip库的知识,希望大家喜欢! 首先,我们来看看iostream。 相信大家都知道iostream,这个库可以...

ChungZH
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部