设为首页 加入收藏

手机版 郑州清新教育-郑州电脑设计培训学校典范,专业课程包括:室内家装建筑装饰设计培训学习班,平面广告网页美工动漫设计培训,淘宝开店美工运营推广网站手机开发培训等课程
郑州清新教育电话

当前位置:首页 > 网页美工设计

网页美工设计

视口单位vm、vh在网页中的排版应用

编辑: 时间:2018-08-01 09:07:18

   视口单位是什么? 在 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; }

求学问答专业答复,快速响应
电话:0371-63218905
手机:13613841515
QQ:
有问题需要老师在线解答? 立即提问 马上回复
更多 热门课程排行榜
郑州清新教育电脑学校

室内家装设计知识平面广告设计知识网页美工设计知识

模具机械设计知识电脑办公文秘知识游戏动漫设计知识

郑州清新教育电脑学校

清新教育新闻资讯清新教育报班选课清新教育就业服务

关于清新教育联系清新教育清新教育乘车路线

关于我们 版权所有:郑州清新教育(www.qingxinedu.cn)备案号:豫ICP备11011661号