CSS中vh和vw单位设置宽高

最新推荐文章于 2023-02-13 17:39:03 发布
最新推荐文章于 2023-02-13 17:39:03 发布
阅读量2.2k 收藏
点赞数
分类专栏： CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kongjunchao159/article/details/51076005
版权

响应式布局离不开百分比，但是，CSS百分比并不是所有问题的最佳解决方案，CSS的宽度是相对于包含它的父元素的宽度的，如果你想用视口的宽度或者高度，而不是父元素的，便可以使用vh和vw单位来设置宽高

1vh等于1/100的视口高度，例如浏览器高度是900px，则1vh便等于9px，宽度同理

例子：

div{width:100vw; height:100vh;}

该元素和浏览器等宽高

也可以使用该单位去设置font-size的值

兼容性：IE10+

kongjunchao159
关注
专栏目录
[139-140]_vw单位及vw适配
述安的博客
08-29 858
不同的设备完美视口的大小是不一样的，比如： iphone6 – 375 iphone6plus – 414由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样，比如在iphone6中，375就是全屏，而到了plus中375就会缺一块，所以在移动端开发时，就不能再使用px来进行布局了。vw 表示的是视口的宽度（viewport width） 100vw = 一个视口的宽度 1vw = 1%视口宽度 与像素不同的是，像素的百分比宽度是相对于其包含块来进行计算，而vw这个单位永远是相对于
前端设置画布的高度_前端设置宽高时height： 100% 和 100vh 的区别
weixin_39979159的博客
12-22 904
1.em在做手机端的时候经常会用到的做字体的尺寸单位说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。2.rem这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点...
scss之px单位转成vw单位
WODE1102的博客
08-22 1797
@charset "UTF-8"; // px单位转成vw单位 @function px2vw($size: 14px, $width: 375px) { @if (type-of($size) == "number" and unit($size) == "px") { @return $size * 100vw / $width; } @else {...
微信小程序开发01
juntech.top
09-10 258
微信小程序开发01 1、从0开发helloworld 从0开发hello,world,初始化一个项目，基本架构只留下pages文件夹和project.config.json。 现在我们着手写hello,world! 创建项目3个app基本文件： app.js/wxss/json 创建about文件夹 创建4个基本文件：about.js/wxml/wxss/json 往文件里面写东西 在完成上面...
hieight:100vh;width:100vw;
weixin_44934844的博客
03-25 470
hieight:100vh;width:100vw; 1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5 但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。 2.rem 这里的r就是root的意思，意思是相对于根节点来进行...
CSS3 视区相关单位VW，VH
qq_27278957的博客
08-15 358
视区相关单位VW，VH VW：相对于视窗的宽度。视窗宽度是100vw。就是说1vw=视窗宽*0.01px； VH：相对于视窗的高度。视窗高度是100vh。就是说1vh=视窗高*0.01px； “视窗”，指的是浏览器内部可视的区域大小。即window.innerWidth /window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
css3新单位vw、vh的使用教程
09-24
CSS3新引入的视口单位vw和vh，提供了相对于视口尺寸的长度单位，它们表示视口（Viewport）宽高的百分比。其中，1vw等于视口宽度的1%，1vh等于视口高度的1%。这样，设计师和开发者就可以直接用视口大小来定义元素的...
纯css3使用vw和vh实现自适应的方法
09-24
CSS3引入了一种新的解决方案，即使用`vw`和`vh`单位，来简化响应式设计的实现过程。`vw`和`vh`单位基于视口的尺寸，提供了更直观的方式来定义元素的尺寸，从而实现真正的跨设备自适应。 **视口单位的理解** 视口...
浅谈css3新单位vw、vh、vmin、vmax的使用详解
09-24
CSS3中的视窗单位vw、vh、vmin和vmax为现代网页设计提供了更灵活的布局方式，尤其在响应式设计中发挥着重要作用。这些单位允许开发者基于浏览器的视窗大小来定义元素的尺寸，而不是依赖于父元素或固定像素值。 1. *...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
09-24
CSS3中的长度单位用于表示网页中元素的尺寸、间距、位置等属性，主要包括像素单位(px)、相对长度单位(em、rem)、视口单位(vh、vw、vmin、vmax)以及其它一些单位(如%、in、cm、mm、pt、pc、ex、ch等)。以下是对这些...
尺寸单位em,rem,vh,vw
前端学习日记
02-12 8762
这几天做demo，看了网上教程有用到尺寸单位vh，vw， 这些单位不是很熟悉，所以上网上找了些资料来认识了这些不认识的单位 1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5 但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照
CSS常见单位总结 px，%，em，rem，vw，vh
Allurewuhui的博客
04-06 1357
1.px px是绝对单位，不会随浏览器页面大小的变化而变化 px其实就是像素点，相对于自身屏幕尺寸。 2. % 相对单位 % 相对于其父元素的宽高进行百分比分配，若父元素宽高改变，子元素设置了 % 则也会随之改变 3.vw 和 vh 相对单位 vw 和 vh 是相对于视口宽高的单位 视口就是目前能看到的整个展示内容的屏幕大小 vw 和 vh 只有0-100的取值，类似于 百分比 % vw 和 vh 会随视口的变化而变化 4.em em是相对单位，最终大小由计
认识视口的宽度-----vw
weixin_57375608的博客
08-31 446
vw-视口的宽度
scss 注册vw和vh
yh8899abc的博客
08-01 599
.stylelintrc.js文件中配置 module.exports = { extends: 'stylelint-config-standard', plugins: [ 'stylelint-scss', ], rules: { indentation: 4, "font-family-no-missing-generic-family-keyword": null, "at-rule-no-unknow
给body加100vh,100vm出现滚动条的解决方法
DESERTo的博客
12-13 1513
body加100vh和100vm出现滚动条的解决方法
css 100vw、100vh出现滚动条怎么解决
热门推荐
m0_52726759的博客
02-13 1万+
css，100vw、100vh滚动条问题
在Vue中 使用sass，配置scss全局函数、变量，配合 vw vh 做移动端自适应布局
沐枫
09-06 6810
前言 以前做移动端项目布局都是rem来做的，但rem需要在页面中引入js，根据设备的宽度来修改根节点<html>标签的font-size样式属性（相对长度单位。相对于根元素(即html元素)font-size计算值的倍数）才能配使用！ rem单位 js代码： (function(doc, win) { var docEl = doc.documentElement, r...
前端vh和vw
Anony_me的博客
04-12 3961
1.vh vh就是当前屏幕可见高度的1%，也就是说height:100vh == height:100%;但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，但是设置height:100vh，该元素会被撑开屏幕高度一致。 2.vw vw就是当前屏幕宽度的1%，补充一句，当设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，但是100vw是相对于屏幕可见宽度来设置的，所以会出现50vw 比50%大的情况 ...
css中vw，vh单位
最新发布
03-20
在CSS中，vw和vh是视窗单位，用于根据视窗的宽度和高度来设置元素的尺寸。具体介绍如下： 1. vw（Viewport Width）：表示视窗宽度的百分比，1vw等于视窗宽度的1%。例如，如果视窗宽度为1000px，那么1vw就等于10px。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值