css3字体能够随着窗口变大,CSS3实现的响应式字体：自适应视图窗口大小的新单位...

这个是为了解决什么问题？

我最近在做一个项目。客户要求标题可以根据用户屏幕的尺寸而自动改变大小。我知道我通常用的相对字体单位(注* 如px, pt, em)只是相对于HTML根元素的大小而自动改变，而不是相对于用户的屏幕。

我是在一MDN的一篇文章 中发现这个Viewport-percentage lengths的，这正是我要找的东西，我只是不知道它叫什么。

它是怎么工作的？

其实非常简单。一个单位相于当前视图窗口大小的1%，宽度和高度是不同的，分别用(vw, vh)表示。你可以通过vmin和vmax设置最大最小值。

1vw = 当前视图窗口(viewport)1%的宽度

1vh = 当前视图窗口(viewport)1%的高度

1vmin = 1vw 或 1vh， 取决于哪个更小一点

1vmax = 1vw 或 1vh， 取决于哪个更大一点

如果当前视图窗口宽度是100毫米，那么5vw就是5毫米。

vmin 和 vmax 的设置就像这样：

section {

width: 100vmin;

background-color: #ff5442;

}

示例

这里有一份完整的

注* 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这样的单位会随窗口大小而立刻发生改变。

更多参考:

相关

Related Posts

CSS学习之外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 外边距合并 外边距合并(叠加)是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。 简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图： 亲自试一试 当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开)，它们的上和/或下外边距也会发生合并。请看下图： 亲自试一试…

推荐10款非常优秀的 HTML5 开发工具

HTML5 发展如火如荼，随着各大浏览器对 HTML5 技术支持的不断完善以及 HTML5 技术的不断成熟，未来 HTML5 必将改变我们创建 Web 应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具，帮助你更高效的编写…

超链接特效

这里提供了各种各样的超链接特性，有些是借助伪元素，有些是借助svg，有些是借助HTML5动画。用你的鼠标悬停在这些链接上，给你跟传统链接完全不一样的效果感觉。你需要使用现代浏览器，比如谷歌浏览器或火狐浏览器。   Demo：http://www.webhek.com/misc/link-style/