移动端中的vMin和vMax

在以前浏览过的文章当中，我发现了很有用的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尺寸的文本在手机屏幕尺寸中变得太小，在大屏尺寸中显示得太大。

一种解决方法是使用@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” fixfor the browser》解决了这些问题。

2. IE9使用vm代替vmin，且不支持vmax。IE10+支持标准单位。

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

移动端中的vMin和vMax相关推荐

深度解析使用CSS单位px、em、rem、vh、vw、vmin、vmax实现页面布局
1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. em ...
弄清楚CSS单位px、em、rem、vh、vw、vmin、vmax的应用场景
1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. em ...
CSS3新单位vw，vh，vmin，vmax详解
1,vw,vh,vmin,vmax是由视窗Viewport大小来决定的,单位1,代表1%,是一种相对单位,只要是为响应式适配视窗的一种解决方案: vw:view width(视窗宽度)的百分比,1vw ...
CSS3视窗单位vw、vh、vmin、vmax说明
vw.vh做为CSS3中的新单位,已经出来挺久的了,这里也我个人也做一下详细的总结. 说明 vw.vh.vmin和vmax是CSS3中的新单位,是一种视窗单位,也是相对单位.它们的大小都是由视窗大小来 ...
CSS3的新单位vw、vh、vmin、vmax
原文链接一.基本说明 vw.vh.vmin.vmax的含义 (1)vw.vh.vmin.vmax是一种视窗单位,也是一种相对单位.它们相对的不是父节点或者页面的根节点,而是由视窗(Viewport) ...
px,em,rem,%，vmin，vmax,vh ,vw
传统的项目开发中,我们只会用到px.%.em这几个单位,它可以适用于大部分的项目开发,并且拥有比较良好的兼容性.但是你知道吗?从css3开始,浏览器对逻辑单位的支持又提升到了另外一个境界,增加了rem ...
-CSS3长度单位rem、vh、vw、vmin、vmax、ex、ch
用这几个单位就可以做自适应布局了,尤其是下面的vh,解决了高度不能使用百分比的问题,很爽. 另外,自适应除去用下面这些单位之外,还可以用width的一些新属性,fill-available.fit-c ...
浅谈移动端中的视口（viewport）
在 PC 端,视口指的是浏览器的可视区域,其宽度和浏览器窗口的宽度保持一致.在 CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比宽度推算的根源,给 CSS 布局限制了一个最大宽度. ...
unity三维地图的经纬度如何在二维地图上表示_接入C++版本recastnavigation寻路库到Unity/服务端中...
前言因为Unity版本的更新迭代,老版本的A*插件在新版本Unity已经无法正常使用,包括一些运行时代码也已经过时,重新接入要花费很多时间,干脆接入一个新的寻路方案吧. 这里选择的是久负盛名的htt ...
CSS单位之vw、vh、vmin、vmax、%
CSS单位之vw.vh.vmin.vmax.% vm/vh:相对于视窗(Viewport)的高度和宽度. 1vh 等于1/100的视窗高度,1vw 等于1/100的视窗宽度. 视窗(Viewport) ...

移动端中的vMin和vMax

移动端中的vMin和vMax相关推荐

最新文章

热门文章