整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

CSS解析-px、em、rem单位

CSS解析-px、em、rem单位

端开发中长度单位有很多,最为常用和熟知的肯定就是px了,随着前端的不断发展,em和rem也越来越普及,只用px一把梭的时代早已成为过去。是px过时了吗?如果对这些单位的使用场景不够了解,可能就会拿着一个rem从头梭到尾了。本篇我们来好好梳理一下css中的长度单位以及它们的使用场景,我们要在合适的场景使用合适的单位。

px

px是像素点单位,与之线性相关的单位有mm(毫米)、cm(厘米)、in(英寸)、pt(点,印刷术语,1/72英寸)、pc(派卡,印刷术语,12点)。

1in=25.4mm=2.54cm=6pc=72pt=96px

em

em是相对长度单位,适合基于特定的字号进行排版。1em=当前元素的字号,其准确值取决于作用的元素。

.padded {
	font-size: 16px;
	padding: 1rem;
}

上面的代码设置了元素的内边距为16px。最终浏览器会根据相对单位计算出绝对值。

使用em来设置padding、height、width、border-radius很合适,当前元素如果继承了不同的字号,响应的内边距、宽高也会自动随之缩放。

需要注意的是,如果使用em定义元素的字号,em的表现会稍有不同。上面提到,当前元素的字号决定了1em的值,但是,如果声明font-size:1.2em,该元素的字号肯定不能等于自己的1.2倍。实际上,此时font-size是根据当前元素继承的字号来计算的。

em示例

上图可以看到,p标签中的字号是1.2*16=19.2px,font-size是根据继承的字号计算的。

em需要注意的就在于此,同时用它指定一个元素的字号和其他属性时,浏览器必须先计算字号,然后使用这个计算值算出其余的属性值。

另外,当用em来指定多重嵌套的元素的字号时,就会产生意外的结果,内嵌的元素会一直继承上级的字号,导致要么嵌套字号越来越大,要么越来越小。

rem

rem和em很像,其实和em的理念很像,都是相对单位,rem中的r是root,顾名思义,rem是相对一个root元素(一般以html标签作为根元素)计算值的,不管在文档的什么位置。

rem结合了px和em的优先,既保留了相对单位的优势,又简单易用可控。那只用rem行吗?行,也不行。如果你只了解习惯这一个单位,就要充分发挥rem的优势,全站梭到底也没什么不行的。但是如果你想写出简单好看的css代码,在不同的场景下使用适当的单位会让你和你的队友少趟许多的坑。

一般情况下,我会使用rem设置字号,用px设置边框、用em来设置其他大部分的属性,尤其是内边距、外边距、圆角等。这样字号是可预测的,同时还能在其他因素改变元素字号时,借助em缩放内外边距。你觉得呢?

vh、vw、vmin、vmax

我们先介绍一下概念:

视口:浏览器窗口里网页可见部分的边框区域,不包括浏览器的地址栏、工具栏、状态栏。

vh:视口高度的1/100

vw:视口宽度的1/100

vmin:视口宽、高中较小的一方的1/100

vmax:视口宽、高中较大的一方的1/100

从定义上,相信小伙伴们已经明白了视口单位的用法。我来介绍相对视口单位的一个比较特别的用途:设置字号。诶?之前不是说设置字号用rem吗?用视口单位能有什么特别的呢?

用rem设置字号的时候,为了适配不同的屏幕大小,免不了要使用@media根据不同的屏幕设置根元素的字号大小,有一个小小的问题是,如果动态去调整浏览器的宽度,达到设置的断点时,一定程度会导致页面的字体突然变大或缩小。但是,如果是使用vw来设置字号呢?页面的字号是不是就不会突然的变化?会很平滑?

当然了,这种用法在实际应用中推广的程度不是特别高,有些是因为浏览器支持的问题,有些是因为没必要因为这么一点点的优化,而放弃心爱的rem。

总结

今天所写的内容主要是帮大家回顾一下css单位的用途及场景,还有一些单位(如fr)还没有提及,将会在后面的文章中结合别的属性写。各种单位的存在一定都有各自的特长和适合的场景,偶尔打开一下思路,也许能有更好的解决方案。大家有想和我分享的内容吗?感谢评论关注哦!

、position:absolute的原点是哪里?

答:position:absolute 是绝对定位

原点默认是body的左上角,意思就是设置了 left:0 top:0 以后,此元素会位于左上角;但如果父元素设定了position属性以后,此元素的原点会跟随父元素的左上角。

2、简单说一下css选择器都有哪几种?

答:有id选择器,class选择器,元素选择器

> 子选择器 空格子选择器

伪类选择器

属性选择器 等等

如果觉得这样说太笼统,想举例子的小伙伴,去看前面的文章啊,有专门的文章进行讲解来着

3、怎么把一个元素隐藏起来?尽可能多的说出你的解决办法

答:

  • display:none;
  • visibility:hidden;
  • width:0px;height:0px;overflow:hidden;
  • 设置透明程度100% opacity 的设置,这样就透明了,看不见了,就是隐藏了呗
  • input 元素有个 type="hidden" 这样设置后,input 元素也是不可见的

4、说一说清除浮动的解决办法

答:

清除浮动是指一个父元素,N个子元素,子元素设置了float:left 这样父元素如果没有设置高度的话,父元素就失去了height 。这样不管子元素有多高,父元素都不能被撑起来。所以清楚浮动问的是怎么把父元素撑起来的问题。

  • 给父元素设置height属性,这样就好了,父元素不是没有高度嘛,设置一个
  • 给父元素设置 overflow:hidden 。浮动的子元素之所以不能把父元素撑起来,是因为子元素设置了float以后,子元素就脱离了本身的文档结构,给父元素设置overflow:hidden 以后,可以把这个情况改回来。
  • 在子元素同级添加 <div style="clear:both;"></div> clear:both 也是一种清楚浮动的常用方法。

5、div垂直居中,说出你用过的解决方案

答:

<div class="dd">书软</div>

  • .dd{width:20px;height:20px;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;}
  • .dd{width:500px;height:500px;position:absolute;top:50%;left:50%;margin-top:-250px;margin-left:250px;}

6、两个a标签之间出现间隙的情况遇到过吗?怎么解决的

答: 写html代码的时候,如果两个a标签出现换行,就会有间隙,可以不换行,写到一行,间隙就没了;也可以设置 display:inline-block 然后设置一定量的margin 负值,这样也是可以消除间隙的。

7、请写出css中 px em rem vw 的使用

答: 这里不做详细的解说了啊,前面的文章我们有一节说的很详细了,可以再去看一遍。小伙伴如果觉得还不是很清楚,就去看看文章,再电脑上敲一敲代码。面试的时候一定不能背书,要总结出自己的一套说辞,这样才能更显得是你的经验之谈。面试官也怕丢人,面试的时候人家比自己懂得太多不行,所以有一些问题你能说出大概他就不往深里问了。当然,也不排除他觉得你懂得多,看你不顺眼,就使劲儿难为你的。

8、从css角度说说,如何优化你的网页

答:

  • 尽量少的写行内和页内样式,因为浏览器每次刷新会缓存css文件中的样式,但行内和页内样式不会被缓存,会每次都加载
  • css样式含有公共部分的要抽离出来,书写的时候尽量写一行,而不是多行,这样可以减小css文件的体积
  • css测试完成以后,上线以后可以进行压缩,压缩后可以把多个css文件压缩得更少,甚至压缩成一个,这样可以减少http请求数量,也是加速页面渲染的一种方法
  • 使用图片精灵,意思就是把项目中的小图标用ps做到一张大图片中,css中使用图片的时候,通过background-position 去定位找到自己需要的小图标,这样也是减少http请求的做法。

9、关于css盒模型

答: 这个问题也很常见,这个问题不清楚的回去看文章啊,前面有一节说这个问题的文章,在电脑上试一试,在纸上画一画,体会体会,这里不做详细解说了。

击右上方红色按钮关注“web秀”,让你真正秀起来!

简言

em 和 rem这种相对长度单位进行页面排版是web开发中的最好的选择。在页面排版中较好应用em 和 rem,根据设备尺寸缩放显示元素的大小。这就使得组件在不同设备上都达到最佳的显示效果成为可能。

web开发中该用 em 还是 rem 呢?


但问题是究竟该用 em 还是 rem 呢?关于这个问题一直存在比较大的争议。本文将会给大家介绍究竟什么是 em 和 rem 和如何进行两者的选择,以及结合两者优势构建模块化的web组件。

什么是em

em 是相对长度单位。它相对于当前元素字体尺寸,即font-size。举例来说,如果当前元素的字体是20px,那么当前元素中的1em就等于20px。

h1 { font-size: 20px } /* 1em=20px */
p { font-size: 16px } /* 1em=16px */

实际开发中,用相对长度单位(如 em)表示字体大小是WEB开发中的最好的选择。请看下面的代码:

h1 { font-size: 2em }

这里的h1元素字体大小究竟是多少呢?

这时,我们需要根据<h1>父元素字体的大小,来计算<h1>字体的尺寸大小。如果父元素是<html>,而且<html>的字体大小是16px。就可以计算出<h1>的字体大小是32px,即2*16px。

用代码表示如下:

html { font-size: 16px }
h1 { font-size: 2em } /* 16px * 2=32px */

设置<html>字体的大小一般来说都不是一个好主意,因为这样重写了用户浏览器的默认设置。相反,可以使用百分比值或者根本不声明<html>字体大小

html { font-size: 100% } /* 缺省 16px */

对于大多数用户或浏览器,字体缺省大小是16px(未做浏览器缺省字体尺寸设置)。

em 还能用来指定除字体大小外的其它属性,象margin或padding等属性都可以用em来表示。

看下面的代码, 对于<h1>和<p>元素,margin-bottom值应该是多少? (假设<html>的字号被设置为100%)

h1 {
 font-size: 2em; /* 1em=16px */
 margin-bottom: 1em; /* 1em=32px */
}
p {
 font-size: 1em; /* 1em=16px */
 margin-bottom: 1em; /* 1em=16px */
}

上述<h1>和<p>的margin-bottom都是1em,但是外边距结果值却不相同。上述现象的出现,是因为em是相对于当前元素字体的大小。由于<h1>中的字体大小现在设置为2em, 因此<h1>中其它属性的1em值就是 1em= 32px。这里比较容易引起误解的地方。

什么是rem

rem表示 root em,它是相对于根元素的长度单位。这里根元素就是<html>中定义的字体大小。这意味着任何地方的1rem总是等于<html>中定义的字体大小。

利用上述相同的代码,我们用 rem 来代替 em,查看margin-bottom的计算值究竟是多少?

h1 {
 font-size: 2rem;
 margin-bottom: 1rem; /* 1rem=16px */
}
p {
 font-size: 1rem;
 margin-bottom: 1rem; /* 1rem=16px */
}

如上述代码所示,1rem总是等于16px(除非变更了<html>字体的大小)。rem的大小相较于em来说意义更直接明确,也很容易理解。

抉择rem/em

在项目开发中究竟是选用 rem 还是 em 一直以来争议不断。一些开发人员不使用rem,因为rem使组件不那么模块化。而另一些开发人员喜欢rem的简单性,使用rem处理所有元素。

其实 em和rem都有各自的优势和劣势,在实际项目开发中,应该结合使用两者,利用各自的优势,从而实现较好代码质量和显示效果。

那么在具体的应用中如何在两者中做选择呢?有两条简单的指导原则:


  • 如果属性尺寸要根据元素字体进行缩放,则使用em
  • 其它情况下都使用rem


上述规则太简单了。 为了更好的理解上述规则,我们就以一个简单的header组件为例,说明单独使用两者来实现组件遇到的问题,并体会结合使用两者所带来的优势。


只使用rem

这里我们只使用rem来编写一个header组件,代码及运行结果如下:

.header {
 font-size: 1rem;
 padding: 0.5rem 0.75rem;
 background: #7F7CFF;
}


web开发中该用 em 还是 rem 呢?


接下来,网站需要一个尺寸更大的header组件。变更CSS代码如下:

.header {
 font-size: 1rem;
 padding: 0.5rem 0.75rem;
 background: #7F7CFF;
}
.header-large {
 font-size: 2rem;
}

web开发中该用 em 还是 rem 呢?

从上述运行结果可以看出,文字的内边距(padding)过小,显示效果不协调。如果我们坚持只使用rem,只能变更css代码如下:

.header {
 font-size: 1rem;
 padding: 0.5rem 0.75rem;
 background: #7F7CFF;
}
.header-large {
 font-size: 2rem;
 padding: 1rem 1.5rem;
}

web开发中该用 em 还是 rem 呢?


上述代码及运行结果,虽然达到了预期的显示效果,但却违背了代码复用的原则。如果网站有多种尺寸的.header样式,就要多次重复的定义内边距。重复的代码增加了项目复杂度,降低了可维护性。

这时可以利用em可以变更上述代码如下:

.header {
 font-size: 1rem;
 padding: 0.5em 0.75em;
 background: #7F7CFF;
}
.header-large {
 font-size: 2rem;
}

当元素属性值的大小需要根据元素字体尺寸缩放时,就应该应用 em 来定义属性尺寸。这就是前述规则中的第一条规则。

只使用em

如果只使用em来定义上述组件,结果会怎样呢?

我们变更上述代码如下(em替换rem):

.header {
 font-size: 1em;
 padding: 0.5em 0.75em;
 background: #7F7CFF;
}
.header-large {
 font-size: 2em;
}
p {
 padding: 0.5em 0.75em;
}

为更接近实际,我们引入了<p>元素,并变更html代码如下:

div class="header header-large">名人名言</div>
<p>简单是稳定的前提</p>
<div class="header">名人名言</div>
<p>简单是稳定的前提</p>

web开发中该用 em 还是 rem 呢?

从上述运行经果中,不难看出.header-large部分的标题并没有和文本左对齐。而如果只使用em实现左对齐,则需要变更CSS代码如下:

.header {
 font-size: 1em;
 padding: 0.5em 0.75em;
 background: #7F7CFF;
}
.header-large {
 font-size: 2em;
 padding-left: 0.375em;
 padding-right: 0.375em;
}

web开发中该用 em 还是 rem 呢?


上述代码及运行结果,虽然达到了预期的显示效果,但却违背了代码复用的原则。如果网站有多种尺寸的.header样式,就要多次重复的定义左右边距。重复的代码增加了项目复杂度,降低了可维护性。

解决上述问题的办法是结合使用em和rem,即使用em定义上下边距,使用rem定义左右边距。变更后代码如下:

.header {
 padding: 0.5em 0.75rem;
 font-size: 1em;
 background: #7F7CFF;
}
.header-large {
 font-size: 2em;
}

总结

究竟是该使用em还是rem呢?答案应该是结合使用rem和rem。当属性值的大小需要根据当前元素字体尺寸缩放时,就选用em,其它的情况都使用更简单的rem。

最后提供小技巧:em及rem值的设定

em及rem值的设定

em和rem 属性值都要经过计算转化成绝过长度单位。常用的字体尺寸用相对长度单位表示会很困难。看下面常用字体值的rem表示(基本字体尺寸是16px):

  • 10px=0.625rem
  • 12px=0.75rem
  • 14px=0.875rem
  • 16px=1rem (base)
  • 18px=1.125rem
  • 20px=1.25rem
  • 24px=1.5rem
  • 30px=1.875rem
  • 32px=2rem

如上述列表所示,上述尺寸值的表示及计算都不分的不便。为了解决上述问题要用到一个小技巧,即著名的 "62.5%"技术。具体请查看下述代码:

body { font-size:62.5%; } /*=10px */
h1 { font-size: 2.4em; } /*=24px */
p { font-size: 1.4em; } /*=14px */

通过62.5%的设定,就可以很容易用em来定义具体属性的尺寸了(10倍的关系)。

而rem,则需要采用如下的方式: