简单总结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 倾斜的网页图片库实例教程
Nov 14 HTML / CSS
css3绘制天猫logo实现代码
Nov 06 HTML / CSS
Css3+Js制作漂亮时钟(附源码)
Apr 24 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
浅析css3中matrix函数的使用
Jun 06 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
解析HTML5中的新功能本地存储localStorage
Mar 01 HTML / CSS
phonegap常用事件总结(必看篇)
Mar 31 HTML / CSS
CSS中实现动画效果-附案例
Feb 28 HTML / CSS
使用CSS实现按钮边缘跑马灯动画
May 07 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 获得汉字拼音首字母的函数
2009/08/01 PHP
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
AngularJS快速入门
2015/04/02 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
node.js 抓取代理ip实例代码
2017/04/30 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
Python中的lstrip()方法使用简介
2015/05/19 Python
python实现将文本转换成语音的方法
2015/05/28 Python
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
结束运行python的方法
2020/06/16 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
车间操作工岗位职责
2013/12/19 职场文书
军训生自我鉴定范文
2013/12/27 职场文书
经济担保书范文
2014/04/02 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
Go语言操作数据库及其常规操作的示例代码
2021/04/21 Golang
Go gorilla/sessions库安装使用
2022/08/14 Golang