如何“vmin”的一个小栗子

CSS里新引入了一些以视窗(Viewport)为长度对象的单位,比如10vm(视窗宽度的10%)或2vh(视窗高度的2%)。这样的长度单位表示方法有时候非常有用,因为它们总是相对于视窗窗口的大小来说,而不或受父元素容器的影响。

除了vmvh两种单位外,还有两种类似的单位:vmin——取vwvh中较小的一个为基准,和vmax——取vwvh中较大的一个为基准。它们同样是一个单位数值,跟pxem%的用法类似。

下面我们来看一下如何使用利用vmin单位来设计一个智能的布局。

一个使用“vmin”的例子

一个页面是要有个头标题,这个标题占用的高度不是固定的,当页面很长高时,头标题就会高一些,如果页面是扁长的,头标题就会扁一些,这样整个页面布局会更好看。

header {
  padding: 10vmin 1rem;
}

我们让标题作用两边有固定的padding(1rem),这样标题不会和页面边框挤到一起。而标题上下应该有多宽,我们使用了10vmin,这个高度会根据视窗屏幕的真实大小而智能的调整。

Large and in charge on large desktop views.
When there is less vertical room, it shortens up so that it isn’t getting in the way of content.
如何“vmin”的一个小栗子2
Portrait mobile views seem balanced.
Small screen landscape
Super tall and narrow still feels right. Which it doesn’t really factoring in just viewport height alone.

Sizing based on the minimum of the two browser window dimensions seems to feel right, rather than basing it solely on width or height.

阅读余下内容
 

发表评论

电子邮件地址不会被公开。 必填项已用*标注