视口百分比长度vh、vw、vi、vb、vmin、vmax单位的了解

目录
文章目录隐藏
  1. 对网格布局的好处
  2. vh 和 vw
  3. vmin 和 vmax
  4. ex 和 ch
  5. 结束语

今天,我将要向你介绍一些你以前可能不知道的 CSS 工具。这些工具都是计量单位,就像像素或者相对单位,但是很可能你从来没听说过它们!

vh 单位

等于初始包含块的高度的 1%。

vi 单位

等于根元素的内联轴方向上的初始包含块的大小的 1%。

vb 单位

等于初始包含块在根元素的块轴方向上的大小的 1%。

vmin 单位

等于 vw 或 vh 中的较小者。

vmax 单位

等于 vw 或 vh 中较大的一个。

另外还有一些单位:

px:绝对单位,页面按精确像素展示

em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是 16px),整个页面内 1em 不是一个固定的值。

rem:相对单位,可理解为”root em”,相对根节点 html 的字体大小来计算,CSS3 新加属性,chrome/firefox/IE9+支持。

对网格布局的好处

rem不是只对定义字体大小有用。比如,你可以使用rem把整个网格系统或者 UI 样式库基于 HTML 根元素的字体大小上,然后在特定的地方使用em比例缩放。这将带给你更加可预测的字体大小和比例缩放。

.container{width:70rem;/* 70*14px=980px */}

从概念上讲,像这样一个策略背后的想法是为了允许你的界面随着你的内容按比例缩放。然而,这可能不一定对每个案例都有意义。

“rem(root em)单位”的兼容性列表:

视口百分比长度 vh、vw、vi、vb、vmin、vmax 单位的了解

另外需注意 chrome 强制最小字体为 12 号,即使设置成 10px 最终都会显示成 12px,当把 html 的font-size设置成 10px,子节点rem的计算还是以 12px 为基准,所以网上很多文章提到的将 html 的font-size设为 10 方便计算不是那么可取。

rem在移动端应用可参考淘宝的页面 http://m.taobao.com(html 的 font-size 通过动态计算获取)

页面基准 320px(20px),html font-size 值的计算:

var ele=document.getElementsByTagName("html")[0],  
           size=document.body.clientWidth/320*20;  
           ele.style.fontSize=size+"px"

注:需设置meta缩放比 1:1

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

vh 和 vw

响应式网页设计技术很大程度上依赖于比例规则。然而,CSS 比例不总是每个问题的最佳解决方案。CSS 宽度是相对于最近的包含父元素。如果你想使用显示窗口的宽度或高度而不是父元素的宽度将会怎么样?这正是vhvw单位所提供的。

vh等于 viewport 高度的 1/100.例如,如果浏览器的高是 900px,1vh 求得的值为 9px。同理,如果显示窗口宽度为 750px,1vw 求得的值为 7.5px。

这些规则表面上看起来有无尽的用途。例如,做一个占满高度的或者接近占满高度的幻灯片,可以用一个非常简单的方法实现,只要用一行 CSS:

.slide{height:100vh;}

设想你想要一个占满屏幕宽度的标题。为做到这一点,你将会用 vw 来设置一个字体大小。这个大小将会随着浏览器的宽度按比例缩放。

视窗单位:vw,vh 的兼容性列表:

视口百分比长度 vh、vw、vi、vb、vmin、vmax 单位的了解

vmin 和 vmax

vhvm总是与视口的高度和宽度有关,与之不同的,vminvmax是与这次宽度和高度的最大值或最小值有关,取决于哪个更大和更小。例如,如果浏览器设置为 1100px 宽、700px 高,1vmin 会是 7px,1vmax 为 11px。然而,如果宽度设置为 800px,高度设置为 1080px,1vmin 将会等于 8px 而 1vmax 将会是 10.8px。

所以你什么时候可能用到这些值?

设想你需要一个总是在屏幕上可见的元素。使用高度和宽度设置为低于 100 的vmin值将可以实现这个效果。例如,一个正方形的元素总是至少接触屏幕的两条边可能是这样定义的:

box {
    height: 100vmin;
    width: 100vmin;
}

如果你需要一个总是覆盖可视窗口的正方形(一直接触屏幕的四条边),使用相同的规则只是把单位换成vmax

.box {
    height: 100vmax;
    width: 100vmax;
}

ex 和 ch

exch单位,与emrem相似,依赖于当前字体和字体大小。然而,与emrem不同的是,这两个单位只也依赖于font-family,因为它们被定为基于特殊字体的法案。

ch单位,或者字符单位被定义为 0 字符的宽度的“先进的尺寸”。但是基本的概念是,给定一个等宽字体的字体,一个 N 个字符单位宽的盒子,比如 width:40ch;,可以一直容纳一个有 40 个字符的应用那个特定字体的字符串。虽然这个特殊规则的传统用途与列出盲文有关,但是这里创造性的可行性一定会超越这些简单的用途。

ex单位被定义为”当前字体的x-height或者一个 em 的一半”。给定的字体的x-height是指那个字体的小写 x 的高度。通常,这是这个字体的中间的标志。

对于这种单位有很多的用途,大多数是用于排版的微调。例如,sup元素,代表上标,可以用相对定位和一个 1ex 的底部值在行内被推高。类似地,你可以拉低一个下标元素。浏览器默认支持这些利用上标和下标特性的vertical-align规则,但是如果你想要更精细的控制,你可以像这样更明确的处理样式:

up {
    position: relative;
    bottom: 1ex;}sub {
    position: relative;
    bottom: -1ex;
}

ex单位在 CSS1 中已经存在,但是你不会找到对ch单位有像这样坚实的支持。

结束语

密切关注 CSS 的持续发展和扩张是非常重要的,一边在你的工具集里知道所有的工具。也许你会遇到一个特殊的问题需要一个意想不到的解决方案,利用这些更隐蔽的计量单位之一。花时间去阅读新规范,记录来自好的资源的新闻资讯!

「点点赞赏,手留余香」

6

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 视口百分比长度vh、vw、vi、vb、vmin、vmax单位的了解

发表回复