100vh和100vw是什么意思？

vw/vh

目标：能够使用vw单位设置网页元素的尺寸
它们是 相对单位，对视口的尺寸计算结果

l vw：viewport width
1vw = 1/100视口宽度
l vh：viewport height
1vh = 1/100视口高度。
我们若想刚好实现一屏的话可以用100vh来实现，可以适用于不同的分辨率。
*注：vw和vh在同一个选择器中不能同时出现，同一选择器中只能出现一个。

  <div class="box2"></div>.box2 {width: 10vh;height: 100vh;background-color: green;
}

100vh和100vw是什么意思？相关推荐

height:100vh,width:100vw
1.em 在做手机端的时候经常会用到的做字体的尺寸单位说白了 em就相当于"倍",比如设置当前的div的字体大小为1.5em,则当前的div的字体大小为:当前div继承的字体大小 ...
几种经典的居中技巧（垂直和水平居中）
技巧一(推荐指数★★★★★) 采用top.right.bottom.left,可以不在乎父元素的宽度和高度,对GPU损耗低于技巧三,但是对浏览器内存的消耗高于技巧三 .子元素 {/*父元素需要posi ...
调试兼容性该注意的的点
vh 表示相对视口高度(Viewport Height),1vh = 1% * 视口高度,页面会随视口屏幕大小改变而改变. 1.body{ height:100vh; width:100vw; } 1 ...
【Python】100行Python代码轻松开发个人博客
❝ 本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes ❞ 1 简介这是我的系列教程「Python+Dash ...
position定位响应式_使用 Vue3 实现双盒子定位 Overlay
之前说过,使用可以很优雅的把某个组件渲染到根节点之外的节点,同时使其渲染的内容不丧失响应式和对应的生命周期函数调用.那么基于此,用实现相对于某一元素的 Overlay . 实际上,这篇文章跟 ...
css 轨道,html-当其他轨道增加时,CSS网格的轨道不会缩...
由于行和列定义中都包含1fr,因此水平和垂直空间受到限制-因此网格项目将平均共享它们.尝试将其更改为自动用于行和列,您可以看到一切正常,但还不完美-请注意,悬停的网格项周围存在空格: .grid--c ...
H5页面适配iOS、Android和微信
前言本文章针对H5开发的单页全屏无滚动页面. 解决方案整体采用vw.vh作为基本单位,采用flex布局,针对字体使用rem单位. 多终端适配针对app包下载等业务场景,需要识别对应的终端,采用不 ...
vue组件中嵌套html,vue2.0怎么用组件自定义标签实现组件的嵌套？
想用这种方式实现组件嵌套: 目前实现的方式:是在app-content.vue中的template中嵌套的 index.html main.js import Vue from '../node_mo ...
HTML+CSS+JS实现 ❤️六边形圆柱弹性动画特效❤️
效果演示: 代码目录: 主要代码实现: 部分CSS样式: :root {--w: 8vmin;/*** change width ***/--h: 15vmin;/*** change heigh ...

100vh和100vw是什么意思？

vw/vh

100vh和100vw是什么意思？相关推荐

最新文章

热门文章