vw和vh是视口(viewport units)单位,何谓视口,就是根据你浏览器窗口的大小的单位,不受显示器分辨率的影响,是不是很神奇,这就代表了,我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。

vw是可视窗口的宽度单位,和百分比有点一样,1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px,那么1vw = 18px。和百分比不一样的是,vw始终相对于可视窗口的宽度,而百分比和其父元素的宽度有关。

vh就是可视窗口的高度了。

他们能够根据窗口大小来自动调节字体大小,这就能很轻松地完成响应式页面的布局

利用vw,wh实现在页面中响应垂直居中,只需要以下代码

#box {
width: 50vw;
height: 50vh;
margin: 25vh auto;
}

CSS3视口单位vw,wh的更多相关文章

  1. css3新单位vw、vh的使用详解

    响应式布局的单位我们第一时间会想到通过rem单位来实现适配,但是它还需要内嵌一段脚本去动态计算跟元素大小. 比如: (function (doc, win) { let docEl = doc.doc ...

  2. CSS3新单位vw、vh、vmin、vmax使用详解

    像 px.em 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位.CSS3 又引入了新单位:vw.vh.vmin.vmax.下面对它们做个详细介绍. 新单位也成为视窗单位,视窗(View ...

  3. CSS3 - 新单位vw、vh、vmin、vmax使用详解(附样例)

    像 px.em 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位.CSS3 又引入了新单位:vw.vh.vmin.vmax.下面对它们做个详细介绍. 一.基本说明 1,vw.vh.vmi ...

  4. css3新单位vw、vh、vmin、vmax的使用介绍

    1,vw.vh.vmin.vmax 的含义 (1)vw.vh.vmin.vmax 是一种视窗单位,也是相对单位.它相对的不是父节点或者页面的根节点.而是由视窗(Viewport)大小来决定的,单位 1 ...

  5. CSS3新单位vw,vh,vmin,vmax详解

    1,vw,vh,vmin,vmax是由视窗Viewport大小来决定的,单位1,代表1%,是一种相对单位,只要是为响应式适配视窗的一种解决方案: vw:view width(视窗宽度)的百分比,1vw ...

  6. css3新单位vw、vh、vmin、vmax的使用详解(转载)

    文章传送门: https://blog.csdn.net/ZNYSYS520/article/details/76053961

  7. CSS3 - 新单位vw、vh、vmin、vmax使用详解

    参考文章出自:https://www.hangge.com/blog/cache/detail_1715.html

  8. css3自适应布局单位vw,vh你知道多少?

    视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...

  9. css3自适应布局单位vw,vh详解

    视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...

随机推荐

  1. svg圆环缓冲动画

    代码如下 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8& ...

  2. ajax-jq

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. leetcode-685-冗余连接②

    题目描述: 参考后提交:并查集: class Solution: def findRedundantDirectedConnection(self, edges: List[List[int]]) - ...

  4. django 模型ManyToMany 关联的添加,删除,查询

    models.py文件内容: from django.db import models class person(models.Model): name = CharField(max_length= ...

  5. idea bug解决

    1.编译时错误:软件包 javax.servlet.http 不存在import javax.servlet.http.HttpServletRequest 解决办法:把servlet-api.jar ...

  6. linux中hadoop组件启动日志存放问题

    如果是nohup xxxx &的话会在当前目录下生成一个nohup文件存放当前出现所有的日志,&表示后台启动: 当然你也可以将日志存放在>/dev/null表示当前日志存放的位置 ...

  7. 2018-2019-2-20175323 java实验五 网络编程与安全

    20175323 java实验五 网络编程与安全 任务一 ①编写MyBC.java实现中缀表达式转后缀表达式的功能 ②编写MyDC.java实现从上面功能中获取的表达式中实现后缀表达式求值的功能 基本 ...

  8. SetFileAttributes

    设置文件属性: SetFileAttributes(文件名, 属性值) 读取文件属性:GetFileAttributes(文件名); 读取文件属性 SetFileAttributes(文件名, FIL ...

  9. 转-C/C++ new与malloc区别

    1.属性 new/delete是C++关键字,需要编译器支持.malloc/free是库函数,需要头文件支持. 2.参数 使用new操作符申请内存分配时无须指定内存块的大小,编译器会根据类型信息自行计 ...

  10. 7 Scatter-loading Features

    7.1 About scatter-loading The scatter-loading mechanism enables you to specify the memory map of an ...