简单总结CSS3中视窗单位Viewport的常见用法


Posted in HTML / CSS onFebruary 04, 2016

介绍视窗(Viewport)单位

视窗(Viewport)是你的浏览器实际显示内容的区域——换句话说是你的不包括工具栏和按钮的网页浏览器。这些单位是vw,vh,vmin和vmax。它们都代表了浏览器(视窗(Viewport))尺寸的比例和窗口大小调整产生的规模改变。

比方说我们有一个1000px(宽)和800px(高)的视窗(Viewport)

vw——代表视窗(Viewport)的宽度为1%,在我们的例子里50vw = 500px。
vh——窗口高度的百分比 50vh = 400px。
vmin——vmin的值是当前vw和vh中较小的值。在我们的例子里因为是横向模式,所以50vim = 400px。
vmax——大尺寸的百分比。50vmax = 500px。
你可以在任何一个可以使用像素值的地方使用它们,比如width,height,margin,font-size等等。它们将通过窗口大小的调整或旋转设备的浏览器来重新计算这些值。

占用页面的整个高度

每一个前端开发人员都致力于这件事。你的第一直觉是这样做:

CSS Code复制内容到剪贴板
  1. #elem{   
  2.     height: 100%;   
  3. }  

然而,除非我们为html和body添加100%的高度,但只是这样还是不行的,因为这样的代码并不优雅而且很有可能会破坏你的设计的其余部分。使用vh就变得相当容易了,只需要为高度设置100vh,那它将永远都是你窗口的高度。

CSS Code复制内容到剪贴板
  1. #elem{   
  2.     height: 100vh;   
  3. }  

视口宽度大小
vw是CSS3新加入的一个使用视口宽度来计算字体大小的单位。这样可以允许更多的响应字体大小。

尽管这似乎是为响应式设计的一个很有用的单位,但我个人不是它的粉丝。因为它并不能在字体大小上给我更多的控制权,他总是显示的过大或过小。

我的方法

在我做这项研究之前,我一直使用像素来设置我的字体大小。这是因为现在的大多数浏览器允许用户在字体太小的情况下自行放大页面,所以使用像素并没有什么问题。

但是,我发现这种方式在很大程度上限制了扩展能力。虽然我的字体在中小屏幕上看起来不错,但他应该在大屏幕上有更好的优化。即便用户有放大的选项,这也不应该是我们希望他们来做的事情。

因此我使用rem设置的解决方案是(使用像素作为备用)。

CSS Code复制内容到剪贴板
  1. html {   
  2.   font-size: 62.5%; /* sets the base font to 10px for easier math */  
  3. }   
  4. body {   
  5.   font-size16px;   
  6.   font-size: 1.6rem;   
  7.   /* sets the default sizing to make sure nothing is actually 10px */  
  8. }   
  9. h1 {   
  10.   font-size32px;   
  11.   font-size: 3.2rem;   
  12. }  

这样我扩大了字体大小而只需要这样写——

CSS Code复制内容到剪贴板
  1. @media screen and (min-width1280px) {   
  2.   html {   
  3.     font-size: 100%;   
  4.   }   
  5. }  

这个方法是用像素作为降级单位因为IE8及以下不支持rem。这有一个问题是当我改变基础字体大小时只能应用在可扩展性大小上面而不适用于后备字体大小。不过我不认为这是一个巨大的问题,因为这个问题对于较大规模的设备的核心来说只是一个额外的问题。

如果你有任何关于如何改善这个问题的想法,请在评论里让我知道。我也可以写一个SCSS的混入,这样我可以不必输入这两个后备和rem单位。

子元素大小根据浏览器改变而不是父元素

在某些情况下,你想要的是子元素的大小相对于窗口改变而不是父元素。同样的,按照前面的例子,这样是不行的:

CSS Code复制内容到剪贴板
  1. #parent{   
  2.     width400px;   
  3. }   
  4. #child{   
  5.     /* This is equal to 100% of the parent width, not the whole page. */  
  6.     width: 100%;   
  7. }   
  8. 如果我们用vw来设置子元素,那么它会简单的溢出并采取网页的全宽:   
  9.   
  10. #parent{   
  11.     width400px;   
  12. }   
  13. #child{   
  14.     /* This is equal to 100% of page, regardless of the parent size. */  
  15.     width: 100vw;   
  16. }  

响应垂直居中

通过设置元素的width,height和margin的视窗(Viewport)单位,你可以不使用任何其它技巧来设置居中。

这里有一个高度为60vh 上下外边距为20vh的矩形,它们加起来是100vh(60+2*20),使它即便调整窗口大小也可以始终居中。

CSS Code复制内容到剪贴板
  1. #rectangle{   
  2.     width: 60vw;   
  3.     height: 60vh;   
  4.     margin: 20vh auto;   
  5. }  

等宽列

你可以使用视窗(Viewport)单位来设置响应式网格。它们的行为类似于百分比但总是相对于视窗(Viewport)的大小。所以你可以将它们放在一个比窗口宽的父元素里,但它仍然有网格来保持其应有的宽度。这样来创建全屏滑块可谓得心应手。

这项技术需要元素用float:left来对齐彼此相邻的元素:

CSS Code复制内容到剪贴板
  1. .column-2{   
  2.     floatleft;   
  3.     width: 50vw;   
  4. }   
  5. .column-4{   
  6.     floatleft;   
  7.     width: 25vw;   
  8. }   
  9. .column-8{   
  10.     floatleft;   
  11.     width: 12.5vw;   
  12. }  

总结

视窗(Viewport)单位有它的用途而且值得尝试。它们易于理解,而且在某些情况下对于代替CSS更加难的解决方案或不可能实现的技术有非常大的帮助。

HTML / CSS 相关文章推荐
详解css3 mask遮罩实现一些特效
Oct 24 HTML / CSS
实现CSS3中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
Apr 08 HTML / CSS
css3实例教程 一款纯css3实现的环形导航菜单
Oct 20 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
使用css3实现的windows8开机加载动画
Dec 09 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
html5应用缓存_动力节点Java学院整理
Jul 13 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
浅析HTML5:'data-'属性的作用
Jan 23 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
Jul 22 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 #HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 #HTML / CSS
css3 border旋转时的动画应用
Jan 22 #HTML / CSS
CSS3实现swap交换动画
Jan 19 #HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 #HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 #HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 #HTML / CSS
You might like
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
javascript 学习之旅 (3)
2009/02/05 Javascript
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
vue车牌号校验和银行校验实战
2019/01/23 Javascript
记录vue项目中遇到的一点小问题
2019/05/14 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
python计算两个数的百分比方法
2018/06/29 Python
浅谈django orm 优化
2018/08/18 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
银行实习人员自我鉴定
2013/09/22 职场文书
应届毕业生简历自我评价
2014/01/31 职场文书
六年级数学教学反思
2014/02/03 职场文书
后勤主管岗位职责
2014/03/01 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
致地震灾区的慰问信
2015/03/23 职场文书
关于观后感的作文
2015/06/18 职场文书