• 欢迎访问小杰博客网站
  • 欢迎访问小杰博客网站哦

CSS3实现的响应式字体:自适应视图窗口大小的新单位

未分类 小杰 4年前 (2015-06-11) 356次浏览 已收录 0个评论
我最近在做一个项目。客户要求标题可以根据用户屏幕的尺寸而自动改变大小。我知道我通常用的相对字体单位(注* 如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毫米。
vmin 和 vmax 的设置就像这样:

示例

这里有一份完整的示例1示例2
注* Bootstrap之类的响应式布局CSS框架多采用 @media (max-width: *) {} 之类响应式样示实现。

此法在大小在跨过临界值时才会发生改变。而vh,vw这样的单位会随窗口大小而立刻发生改变。

小杰博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:CSS3实现的响应式字体:自适应视图窗口大小的新单位
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址