博客列表 >细说em/rem/vh/vw与响应式布局

细说em/rem/vh/vw与响应式布局

残破的蛋蛋
残破的蛋蛋原创
2020年12月20日 21:46:151035浏览

细说em/rem/vh/vw与响应式布局

一、em,rem的原理与应用场景

CSS单位中的长度单位分为:相对长度、绝对长度,如下表:

长度单位

引用MDN上的两句话:

  • em:在 font-size 中使用是相对于父元素的字体大小,在其他属性中使用是相对于自身的字体大小;
  • rem:根元素的字体大小

出处链接:MDN

1.em是相对长度单位,通常浏览器的默认字体都是16px,那么1em = 16px,以此类推可知:0.75em = 12px,0.625em = 10px
这样使用起来不便于计算,与实际的像素px转换上比较麻烦,为了简化换算,通常我们可以在body这样写:

  1. <style>
  2. body {
  3. font-size: 62.5%;
  4. }
  5. </style>

通过上面设置的font-size大小,我们可以换算出,16px x 62.5% = 10px,这样,页面中的1em = 10px,1.2em = 12px,1.6em = 16px,在视觉、换算上面简单多了。

例如,有以下代码:

  1. <div>Hello World!</div>

我们给它的字体设置为:

  1. <style>
  2. div {
  3. font-size: 2.2em;
  4. }
  5. </style>
  • 效果图:
    em案例

由上面的案例可以看出当把div的字体样式设置为2.2em时,它的实际大小为:2.2em * 10 = 22px。

但是em也有缺点:

  1. em的值并不是固定的;
  2. em会继承父级元素的字体(font-size)的大小,参照物都是父级元素的字号大小;
  3. em的字体大小都是相对于父级元素的大小决定的,因此会出现这种情况:当一个设置了font-size的元素放在另外一个设置了font-size元素里,此时它还有一个子元素,它的子元素也设置了font-size,那么这个子元素的最后计算的结果就是三个font-size的乘积。
    下面举例说明:
  1. <style>
  2. body {
  3. font-size: 62.5%;
  4. }
  5. div {
  6. font-size: 2.2em;
  7. }
  8. div span {
  9. font-size: 2.2em;
  10. }
  11. </style>
  12. <div>
  13. Hello World!
  14. <br>
  15. <span>你好,世界!</span>
  16. </div>
  • 效果图:
    em

以上案例可以看出:英文字符Hello World的字体大小是2.2em x 10 = 22px,汉字你好,世界!的字体大小是2.2em x 2.2em * 10 = 48.4px。

其他,诸如,宽度、高度的原理也是一样的。

em具有动态性,和继承性,但还是有缺点,因为有时候我们需要一个具有固定值的em,
它不应爱随着它自身和祖先元素的字号大小而变动

2.当前font-size属性出现在html中,html叫根元素,一个页面中它是唯一的且是最大的包含块。所以,在html中定义的em大小,可以看成一个常量(固定值),html的所有后代元素,如果想引用html中的字号,就不能再用em了,因为em具有继承性,此时,我们用一个新的关键字来引用根元素字号大小font-size的值,这个关键字就是:rem。

现有如下html代码:

  1. <h2>
  2. Hello World!
  3. <span>PHP是世界上最好的语言!</span>
  4. </h2>
  • 效果如下:
    html

从上图可以看出来h2的大小是24px,这是默认效果,因为font-size可以被继承,所以span标签里面的字体大小也是24px。因此如果我们想要让span标签继承html根元素的font-size,就需要用rem属性。一般浏览器默认的大小是16px,所以1em = 16px,因此,1.25em = 1.25 x 16 = 20px

  1. <style>
  2. html {
  3. fotn-size: 1.25em;
  4. }
  5. </style>

此时html根元素设置了字号大小1.25em,那么这是1em = 20px了。然后我们有如下html结构:

  1. <h2>
  2. Hello World!
  3. <span>PHP是世界上最好的语言!</span>
  4. </h2>

给上面的html结构添加上样式:

  1. <style>
  2. html {
  3. /* 1em = 20px */
  4. font-size: 1.25em;
  5. }
  6. h2 {
  7. /* 1.5rem: 1.5 * 20 = 30px */
  8. font-size: 1.5rem;
  9. }
  10. h2 span {
  11. /* 1rem: 1 * 20px = 20px */
  12. font-size: 1rem;
  13. }
  14. </style>

此时的h2,和span标签里的文字大小分别为30px和20px,效果如图:
rem

二、vh,vw

vh、vw的概念:

  1. vh:视口的“初始包含块”的高度的百分之一(1/100)
  2. vw:视口的“初始包含块”的宽度的百分之一(1/100)

在PC端,视口的宽高就是浏览器的宽高,但是值得注意的是,视口不包括地址栏,菜单栏,工具条,状态栏。
在移动端,这个跟PC端有点不太一样,不过一般设置:

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

以上代码以显示屏幕显示的网页宽度定义了视口宽度,网页比例和最大比例均被设置成100%。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议