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. python操作redis数据

    一.环境安装 1.redispy安装 (automatic) C:\Users\Administrator>pip install redis 2.检测是否安装成功 (automatic) C: ...

  2. 基于javaweb人脸识别注册登录系统

    ---恢复内容开始--- 现在是2019年,人脸识别技术已经相当成熟了,百度自2017年发布人脸识别技术,已经被广泛应用,不管从现在的iphoneX掀起的面部解锁到手机应用端的各种人脸认证,这一技术已 ...

  3. 关于springboot错误:“找不到或无法加载主类”的解决办法

    我从网上找的一个Demo,运行的时候报 错误:“找不到或无法加载主类”,百度了一番,都是说在项目目录打开cmd,使用 mvn install.mvn clean complie之类的命令,都成功了,但 ...

  4. C中为什么不能用==比较字符串?

    通常的回答是,==比较的不是字符串的内容,它是在比较指针.或者说,==(或者!=)仅比较两个字符串的首地址,而不会比较字符串每个字符. 那其实接下来应该问的问题是,为什么会只比较首地址呢? 因为早期的 ...

  5. Swift 环境搭建

    Swift 环境搭建 Swift是一门开源的编程语言,该语言用于开发OS X和iOS应用程序. 在正式开发应用程序前,我们需要搭建Swift开发环境,以便更好友好的使用各种开发工具和语言进行快速应用开 ...

  6. Tomcat 调优的技巧

    转载:www.cnblogs.com/wangsen, https://mp.weixin.qq.com/s/WrIsOOyR7o4SwSXMT0Zecg 最近,看到一篇讲述 Tomcat 调优的文章 ...

  7. bzoj1031题解

    [解题思路] 将原串复制一份拼接到原串后作为处理串,可以对处理串的前一半后缀排序,即可得出顺序.复杂度O(Llog2L). [参考代码] 也是naive的时候写的..后缀数组居然是用桶排求的.. #p ...

  8. BZOJ 3779: 重组病毒(线段树+lct+树剖)

    题面 escription 黑客们通过对已有的病毒反编译,将许多不同的病毒重组,并重新编译出了新型的重组病毒.这种病毒的繁殖和变异能力极强.为了阻止这种病毒传播,某安全机构策划了一次实验,来研究这种病 ...

  9. NOIp2018集训test-9-17(am)

    这是一套去年在长沙考过的题,但是我当时就没理清楚+没写题解(我以前很多博客都写得跟shi一样,完全没有意义,看到就想打当时的我),所以又考得稀烂. T1.star way to heaven 容易想到 ...

  10. iOS13适配/黑暗模式的适配/KVC访问私有属性/模态弹窗ViewController 默认样式改变 /LaunchImage即将废弃/蓝牙的权限申请/推送Device Token适配/UIKit 控件变化/StatusBar新增样式

    目录 1. KVC访问私有属性 2. 模态弹窗ViewController 默认样式改变 3. 黑暗模式的适配 4. LaunchImage即将废弃 5. 新增一直使用蓝牙的权限申请 6. Sign ...