简单总结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 相关文章推荐
纯CSS实现设置半个字符的样式
Jul 03 HTML / CSS
Css3新特性应用之形状总结
Dec 08 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
详解Html5微信支付爬坑之路
Jul 24 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
Jul 25 HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
Jul 01 HTML / CSS
新的CSS 伪类函数 :is() 和 :where()示例详解
Aug 05 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
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
JS解析XML实例分析
2015/01/30 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
vue实现条件判断动态绑定样式的方法
2018/09/29 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
python检测某个变量是否有定义的方法
2015/05/20 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
Python闭包思想与用法浅析
2018/12/27 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
Python socket服务常用操作代码实例
2020/06/22 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
飞利浦美国官网:Philips美国
2020/02/28 全球购物
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
试解释COMMIT操作和ROLLBACK操作的语义
2014/07/25 面试题
StringBuilder和String的区别
2015/05/18 面试题
中职生自荐信
2013/10/13 职场文书
肯尼迪就职演说稿
2013/12/31 职场文书
心理健康心得体会
2014/01/02 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
幼儿园六一主持词
2015/06/30 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL