上海快3

设为上海快3 加入收藏

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

当前位置:上海快3 > 网页美工设计

网页美工设计

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

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

上海快3   视口单位是什么? 在 CSS 规范中,有4种类型的可用视口单位:

上海快3  vw --- 1vw 等于视口宽度的 1%

上海快3  vh --- 1vh 等于视口高度的 1%

上海快3  vmin --- vw 和 vh 中的较小值

  vmax --- vw 和 vh 中的较大值

上海快3  视口,即浏览器屏幕大小,1vw 等于浏览器宽度的 1%,100vw 即整个浏览器的宽度。

  视口的单位大小会根据视口大小的改变自动运算,视口大小的改变常发生于页面加载、页面缩放或者屏幕方向的改变(横纵切换)。正因为如此,创建一个大小总为视口四分之一大小的容器是非常容易滴:

上海快3  .component {

上海快3  width: 50vw;

上海快3  height: 50vh;

  background: rgba(255, 0, 0, 0.25)

  }

  将视口单位用于网页排版

  将视口单位用于网页排版的唯一理由就是视口的单位大小会根据客户端浏览器的视口大小自动运算。也就是说,我们不必明确地通过媒体查询来声明字体大小。举个demo来简要说明一下。

  代码如下,将断点设置为 800px,字体大小从 16px 变为 20px:

  html {

  font-size: 16px;

上海快3  @media (min-width: 800px) {

  font-size: 20px;

  }

  }

  对于上述代码,当视口大小是 800px 时,字体会从 16px "突变" 来 20px。在响应式排版中,这是经常摘用的方式。有时,你会碰来在两个断点之间添加额外的媒体查询来确保页面排版适应所有设备:

  html {

上海快3  font-size: 16px;

  @media (min-width: 600px) {

  font-size: 18px;

  }

上海快3  @media (min-width: 800px) {

上海快3  font-size: 20px;

  }

  }

  尽管这样做能达来效果,但需要更多特定的媒体查询规则和字体大小。通常,会挑选 3~4 中字体大小。

上海快3  但是,如何不同媒体查询或字体大小的设置来达来同样的效果呢?

上海快3  当然是有滴,这就是视口单位的用处了。你可以用视口单位来表示字体大小:

  html { font-size: 3vw; }

求学问答专业答复,快速响应
电话:0371-63218905
手机:13613841515
QQ:
有问题需要老师在线解答? 立刻提问 立刻回复
郑州清新教育电脑学校

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

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

郑州清新教育电脑学校

清新教育上海快3清新教育报班选课清新教育就业服务

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

上海快3 版权所有:郑州清新教育(www.ijunlv.com)备案号:

免责声明: 本站资料及图片来源互联网文章-|,本网不承担任何由内容信息所引起的争议和法律责任。所有作品版权归原创作者所有,与本站立场无关-|,如用户分享不慎侵犯了您的权益,请联系我们告知,-|我们将做删除处理!