内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

MinMaxing:理解CSS中的vMin和vMax

2016-09-30 17:11 出处:清屏网 人气: 评论(0

在以前浏览过的文章当中 (点这查看) ,我发现了很有用的CSS单位: vw 和 vh 。但与其相关的单位 vmin 和 vmax 却远不为人知,且知之甚少。这是非常不幸的,因为在web开发当中,它们拥有一些非常新颖的用例。

正如我之前所讨论过的, 1vh 等于当前viewport高度(即打开浏览器窗口高度)的1%,而 1vw 则是当前viewport宽度的1%。 vmin 和 vmax 也使用相同的单位,但响应于特定的规则:

  1. vim 使用最小那边的比例。也就是说,如果浏览器窗口的高度小于他的宽时, 1vmin 将等价于 1vh ;如果浏览器的宽度小于他的高度时, 1vmin 等价于 1vw 。
  2. vmax 则相反:它使用最大的那一边。因此当viewport的宽大于高时, 1vmax 等价于 1vw ;如果浏览器的高大于宽时, 1max 将等价于 1vh 。

vim:使用视窗宽与高中的最小的那个。 vmax:使用视窗宽与高中的最大的那个。

它们能被用在什么地方?

vim 和 vmax 是CSS方向 媒体查询 ( @media screen and (orientation : portrait) 或 @media screen and (orientation : landscape) )的一个理想的替代品,或算是补充,因为它们会立即对屏幕宽高比做出响应。

保持Hero text在掌握之中(Keeping Hero Text Under Control)

我先前曾展示过 《在头部文本中使用 vw 单位》 ,但这样做会出现一个显著的问题:一开始在合理的尺寸中 vw 单位的文本,在非常大或相对较小的视窗尺寸中会脱离控制:

vw 尺寸的文本在手机屏幕尺寸中变得太小,在大屏尺寸中显示得太大。

一种解决方法是使用 @media 查询“clamps”以设置最小和最大的字体尺寸,复杂你的CSS。另一种方法是将头部的 font-size 值设置为 vmin 。

h1 {
  font-size: 20vmin;
  font-family: Avenir, sans-serif;
  font-weight: 900;
  text-align: center;
}

使用 vmin 单位时,在一个宽屏且正收缩的浏览器中,标题文字的尺寸将不会变得更大/小,因为该单位响应于viewport高度。但如果viewport变得比他的宽更窄时 —— 也就是说,如果页面进入竖屏时 —— 该文本将变得更大或更小,如相关 CodePen demo 中的演示。

在fold上保持特性 (Keeping Features Above The Fold)

起始于页面的顶部,且测量高度小于 100vh 时的一个特性,将永远显示“above the fold”(也就是说,它将永远停留在视窗口最低边缘的上方),但在部分宽高比中,它同样会显示不必要的大小。如果元素的 min-height 值使用 vmax 单位代替,他会在宽屏尺寸中显示合理的大小,且在窄视窗中显示相对较细:

header {
    background: #000;
    min-height: 8vmax;
}

它会与 max-height 结合,以限制在超大视窗尺寸中元素的高度。

潜在的问题

关于 vmin 和 vmax ,有几件事需要注意:

  1. 手机Safari的支持中有几个历来都存在的bug(希望在即将到来的IOS 10中能得到解决)。Rodney Rehm有篇文章` 《“buggyfill” fix for the browser》 解决了这些问题。
  2. IE9使用 vm 代替 vmin ,且不支持 vmax 。IE10+支持标准单位。

正如我希望你能看见的, vmin 和 vmax 确实有些优秀的用途;我希望他们会在你的工作中发现适当的引用。

照片来自于 Richard Fraser ,在创作共用许可证(Creative Commons license)下使用。

分享给小伙伴们:
本文标签: CSSvMinvMax

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

CopyRight © 2015-2016 QingPingShan.com , All Rights Reserved.

清屏网 版权所有 豫ICP备15026204号