视口单位vm、vh在网页中的排版应用
视口单位是什么? 在 CSS 规范中，有4种类型的可用视口单位：
vw --- 1vw 等于视口宽度的 1%
vh --- 1vh 等于视口高度的 1%
vmin --- vw 和 vh 中的较小值
vmax --- vw 和 vh 中的较大值
视口，即浏览器屏幕大小，1vw 等于浏览器宽度的 1%，100vw 即整个浏览器的宽度。
视口的单位大小会根据视口大小的改变自动计算，视口大小的改变常发生于页面加载、页面缩放或者屏幕方向的改变(横纵切换)。正因为如此，创建一个大小总为视口四分之一大小的容器是非常容易滴：
.component {
width: 50vw;
height: 50vh;
background: rgba(255, 0, 0, 0.25)
}
将视口单位用于网页排版
将视口单位用于网页排版的唯一理由就是视口的单位大小会根据客户端浏览器的视口大小自动计算。也就是说，我们不必明确地通过媒体查询来声明字体大小。举个demo来简要说明一下。
代码如下，将断点设置为 800px，字体大小从 16px 变为 20px：
html {
font-size: 16px;
@media (min-width: 800px) {
font-size: 20px;
}
}
对于上述代码，当视口大小是 800px 时，字体会从 16px "突变" 到 20px。在响应式排版中，这是经常采用的方式。有时，你会碰到在两个断点之间添加额外的媒体查询来确保页面排版适应所有设备：
html {
font-size: 16px;
@media (min-width: 600px) {
font-size: 18px;
}
@media (min-width: 800px) {
font-size: 20px;
}
}
尽管这样做能达到效果，但需要更多特定的媒体查询规则和字体大小。通常，会选择 3~4 中字体大小。
但是，如何不同媒体查询或字体大小的设置来达到同样的效果呢?
当然是有滴，这就是视口单位的用处了。你可以用视口单位来表示字体大小：
html { font-size: 3vw; }
| << 上一篇：2018年下半年网页设计较新流行趋势 | >> 下一篇：网页css中pt、px、em、ex、cm、rem的区别 |
- 2018-07-31平面排版设计的技巧如何设计更好的版面
- 2018-07-192018年下半年网页设计较新流行趋势
- 2018-07-13网页设计使用单页设计还是多页设计
- 2018-06-23优秀Logo设计技巧-群化的应用
- 2018-06-16网页和APP中背景的8个主要设计趋势
- 2018-06-09网页设计较新流行设计趋势
- 2018-06-05网页设计提升用户体验的设计原则
- 2018-06-04平面设计中帮助排版的几个小技巧
- 2018-06-02排版版式设计中的版面率和留白率
- 2018-05-26网页设计中渐变色彩作用特点
- 2018-05-12现在正在流行的3种网页设计趋势
- 2018-05-07文字排版设计的文字使用技巧
- 2018-04-202018年较新网页设计流行趋势分析
- 2018-04-13网页设计中背景纹理的设计特点
- 2018-04-10学习网页设计的心得体会
- 求学问答专业答复，快速响应
- 电话：0371-63218905
- 手机：13613841515
-
QQ：
