企业网站,个人博客等WordPress网站以及其他语言网站开发定制需求加QQ详聊。

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

HTML CSS 码云 42℃ 0评论

今天,我将要向你介绍一些你以前可能不知道的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宽度是相对于最近的包含父元素。如果你想使用显示窗口的宽度或高度而不是父元素的宽度将会怎么样?这正是vh和vw单位所提供的。

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

vh和vm总是与视口的高度和宽度有关,与之不同的,vmin和vmax是与这次宽度和高度的最大值或最小值有关,取决于哪个更大和更小。例如,如果浏览器设置为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

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

ch单位,或者字符单位被定义为0字符的宽度的“先进的尺寸”。在”Eric Meyer’s的博客”中可以找到一些非常有趣的讨论关于这意味着什么,但是基本的概念是,给定一个等宽字体的字体,一个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单位有像这样坚实的支持。具体支持,在Eric Meyer’s的博客中查看CSS单位和值。

结论

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

转载请注明:码云笔记 » 视口百分比长度vh、vw、vi、vb、vmin、vmax单位的了解

喜欢 (2)or分享 (0)
发表我的评论
取消评论
表情

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

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