细说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这样写：
body{
font-size:62.5%;
}
通过上面设置的font-size大小，我们可以换算出，16px x 62.5% = 10px，这样，页面中的1em = 10px，1.2em = 12px，1.6em = 16px，在视觉、换算上面简单多了。
例如，有以下代码：
我们给它的字体设置为：
div{
font-size:2.2em;
}
效果图：
由上面的案例可以看出当把div的字体样式设置为2.2em时，它的实际大小为：2.2em * 10 = 22px。
但是em也有缺点：
em的值并不是固定的；
em会继承父级元素的字体(font-size)的大小，参照物都是父级元素的字号大小；
em的字体大小都是相对于父级元素的大小决定的，因此会出现这种情况：当一个设置了font-size的元素放在另外一个设置了font-size元素里，此时它还有一个子元素，它的子元素也设置了font-size，那么这个子元素的最后计算的结果就是三个font-size的乘积。
下面举例说明：
body{
font-size:62.5%;
}
div{
font-size:2.2em;
}
div span{
font-size:2.2em;
}
Hello World!
你好，世界！
效果图：
以上案例可以看出：英文字符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代码：
Hello World!
PHP是世界上最好的语言！
效果如下：
从上图可以看出来h2的大小是24px，这是默认效果，因为font-size可以被继承，所以span标签里面的字体大小也是24px。因此如果我们想要让span标签继承html根元素的font-size，就需要用rem属性。一般浏览器默认的大小是16px，所以1em = 16px，因此，1.25em = 1.25 x 16 = 20px
html{
fotn-size:1.25em;
}
此时html根元素设置了字号大小1.25em，那么这是1em = 20px了。然后我们有如下html结构：
Hello World!
PHP是世界上最好的语言！
给上面的html结构添加上样式：
html{
/* 1em = 20px */
font-size:1.25em;
}
h2{
/* 1.5rem: 1.5 * 20 = 30px */
font-size:1.5rem;
}
h2 span{
/* 1rem: 1 * 20px = 20px */
font-size:1rem;
}
此时的h2，和span标签里的文字大小分别为30px和20px，效果如图：
二、vh，vw
vh、vw的概念：
vh：视口的“初始包含块”的高度的百分之一(1/100)
vw：视口的“初始包含块”的宽度的百分之一(1/100)
在PC端，视口的宽高就是浏览器的宽高，但是值得注意的是，视口不包括地址栏，菜单栏，工具条，状态栏。
在移动端，这个跟PC端有点不太一样，不过一般设置：
以上代码以显示屏幕显示的网页宽度定义了视口宽度，网页比例和最大比例均被设置成100%。
扫一扫
516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
