移动端中的vMin和vMax

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

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

1.   vim使用最小那边的比例。也就是说,如果浏览器窗口的高度小于他的宽时,1vmin将等价于1vh;如果浏览器的宽度小于他的高度时,1vmin等价于1vw

2.   vmax则相反:它使用最大的那一边。因此当viewport的宽大于高时,1vmax等价于1vw;如果浏览器的高大于宽时,1max将等价于1vh


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

它们能被用在什么地方?

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

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



一个显著的问题:一开始在合理的尺寸中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结合,以限制在超大视窗尺寸中元素的高度。

潜在的问题

关于vminvmax,有几件事需要注意:

1.   手机Safari的支持中有几个历来都存在的bug(希望在即将到来的IOS 10中能得到解决)。Rodney Rehm有篇文章`“buggyfill” fixfor the browser解决了这些问题。

2.   IE9使用vm代替vmin,且不支持vmaxIE10+支持标准单位。

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




  • 1
    点赞
  • 0
    评论
  • 4
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值