CSS3中的vh和vm以及rem

先说下vh和vw

其全称为viewport heightviewport width。具体指‘视区高度百分值’和‘视区宽度百分值’。
因此html5和css3引入视口的概念来代替显示器的物理尺寸。通过在meta标签上的设置,视口的长宽可以跟设备的物理分辨率相等,也可以不相等(以便手机上可以实现用两个手指来放大会缩小页面),可根据需要灵活掌握。在PC中,视口的长宽则是跟浏览器窗口的物理分辨率恒等的。
1vw等于视口宽度(viewport width)的百分之一,也就是说100vw就是视口的宽度。
同理,1vh等于视口高度的百分之一。
假设当前窗口下,1vh=6px,那么设置为5vh即为高度为30px。
不过由于vw和vh是css3才支持的长度单位,所以在不支持css3的浏览器中是无效的口高度。

rem

关于rem,更多的是看到过 em 的原因。其全称为font size of the root element
rem是相对于根元素,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。简单的说它就是一个相对单位。
看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
rem主要是为实现有效的屏幕适配布局而存在的。
我们在设定页面布局时,常使用px为单位,但px是一个绝对单位,因此实现不了响应式。那rem如何控制呢?举个例子:

html{
    font-size:20px;
}
.btn {
    width: 6rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;
    display: inline-block;
    background: #06c;
    color: #fff;
    border-radius: .5rem;
    text-decoration: none;
    text-align: center;    
}

btn的大小全部和rem相关,只需在@media screen and (max-width:960px)等css段中修改html的font-size值,就可以实现大小的自适应了。

发表新评论
Gravatar图片显示区