首页 > 其他分享 >CSS 中的vh、vw单位

CSS 中的vh、vw单位

时间:2022-09-23 11:58:12浏览次数:41  
标签:视窗 vh 高度 1% vw CSS

        vw: 视窗宽度的百分比(1vw 代表视窗的宽度为 1%)
        vh: 视窗高度的百分比( 1vh 代表视窗的高度为 1%)
        vmin:当前 vw 和 vh 中较小的一个值
        vmax:当前 vw 和 vh 中较大的一个值

 

vw、vh与 % 的区别

  1. % 是相对于父元素的大小设定的比率,vw、vh 是视窗大小决定的。
  2. vw、vh 优势在于能够直接获取高度,而用 % 在没有设置 body高度的情况下,是无法正确获得可视区域的高度的,所以这是挺不错的优势。

标签:视窗,vh,高度,1%,vw,CSS
From: https://www.cnblogs.com/Fooo/p/16722208.html

相关文章

  • JavaScript HTML DOM - 改变CSS
    改变HTML样式:语法:document.getElementById(id).style.property=新样式 使用事件:HTMLDOM允许通过触发事件来执行代码:比如:元素被点击。页面加载完成。输入框被修......
  • HTML & CSS 设计原则
    设计原则DesignPrinciple响应式设计Responsive响应式设计的意思是网页能够根据其显示在的屏幕的大小自动伸缩。响应式设计使得对笔记本和手机用户更加友好。分辨率......
  • 《深入解析css》
    《深入解析CSS》0CSS前端之路起点简介多亏有那位老师的相助,帮我拓宽了前端领域的边界,我决定重头开始走前端之路这是本人重走前端决定阅读的第一本书本人在老师的帮助......
  • CSS实现下拉框
    主要使用position的绝对定位absolute来做。<!doctypehtml><head><style>body{font-family:Helvetica,Arial,sans-serif;min-height:200vh;......
  • css实现马赛克画板
    background:linear-gradient(45deg,rgba(0,0,0,.2)25%,transparent0,transparent75%,rgba(0,0,0,.2)0),linear-gradient(45deg,rgba(0,0,0,.2)25%,tran......
  • 我的Vue之旅、04 CSS媒体查询完全指南(Media Quires)
    什么是SCSSSass:SassBasics(sass-lang.com)SCSS是CSS的预处理器,它比常规CSS更强大。可以嵌套选择器,更好维护、管理代码。可以将各种值存储到变量中,方便复用。......
  • 自适应插件postcss-px-to-viewport
    module.exports={plugins:{autoprefixer:{},//用来给不同的浏览器自动添加相应前缀,如-webkit-,-moz-等等"postcss-px-to-viewport":{unitToConvert:"px",//要......
  • 纯css+html实现伸缩式动态搜索框
    <divclass="search-box"> <aclass="search-btn">  <iclass="fafa-search"aria-hidden="true"></i> </a> <inputtype="text"class="search-txt"plac......
  • CSS3渐变
    简介CSS3渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前,你必须使用图像来实现这些效果。但是,通过使用CSS3渐变(gradients),你可以减少下载的时间......
  • CSS 中的选择器类型
    CSS中的选择器类型CSSPhotoby潘卡伊·帕特尔on不飞溅在CSS中,选择器起着至关重要的作用。在这里,您可以根据示例查看选择器的类型。在此之前,了解特异性很重要,......