外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 外边距合并 外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。 简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图： 亲自试一试 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图： 亲自试一试…
July 14, 2016
CSS3实现的响应式字体：自适应视图窗口大小的新单位
这个是为了解决什么问题？
我最近在做一个项目。客户要求标题可以根据用户屏幕的尺寸而自动改变大小。我知道我通常用的相对字体单位（注* 如px, pt, em）只是相对于HTML根元素的大小而自动改变，而不是相对于用户的屏幕。
在上网查询之后我发现一种新的字体大小单位，叫做：Viewport-Percentage Lengths.
我是在一MDN的一篇文章 中发现这个Viewport-percentage lengths的，这正是我要找的东西，我只是不知道它叫什么。
它是怎么工作的？
其实非常简单。一个单位相于当前视图窗口大小的1%，宽度和高度是不同的，分别用(vw, vh)表示。你可以通过vmin和vmax设置最大最小值。
1vw = 当前视图窗口（viewport）1%的宽度
1vh = 当前视图窗口（viewport）1%的高度
1vmin = 1vw 或 1vh， 取决于哪个更小一点
1vmax = 1vw 或 1vh， 取决于哪个更大一点
如果当前视图窗口宽度是100毫米，那么5vw就是5毫米。
注* Bootstrap之类的响应式布局CSS框架多采用 @media (max-width: *) {} 之类响应式样示实现。
// 屏幕宽度小于767个象素时应用的CSS样式
@media (max-width: 767px) {
//CSS代码
}
// 屏幕宽度在767和991象素之间的CSS样式
@media (min-width: 768px) and (max-width: 991px) {
//CSS代码
}
此法在大小在跨过临界值时才会发生改变。而vh,vw这样的单位会随窗口大小而立刻发生改变。
原文地址： medium.com
浏览器支持情况 ： http://caniuse.com/#feat=viewport-units
更多参考:
Related Posts
About Author
