vw/vh

最新推荐文章于 2022-07-28 21:14:10 发布
最新推荐文章于 2022-07-28 21:14:10 发布
阅读量121 收藏
点赞数 1
分类专栏： 移动端布局 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43368552/article/details/125660317
版权

vw/vh

目标：能够使用vw单位设置网页元素的尺寸

相对单位

相对视口的尺寸计算结果

 

 

vw=1/100视口宽度

vh=1/100视口高度

vw适配原理：

    // 在进行适配的时候，要么选择vw进行适配，要么选择vh进行适配。不能同时使用两个进行适配！！！

    // 因为有一些手机虽然宽度相同，但是高度不一致，所以同时使用vw和vh会出现

 

小番水源
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3自适应布局单位vw,vh
weixin_42371145的博客
06-03 371
转自https://www.cnblogs.com/luxiaoxing/p/7544375.html 视口单位(Viewport units) 什么是视口？ 在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。 视口单位中的“视口”，桌面...
px转vw和vh换算小工具
05-31
在前端开发中，像素（px）是常用的单位，但在响应式设计中，为了实现更灵活的布局，我们经常需要用到视口相关的单位，如视口宽度单位（vw）和视口高度单位（vh）。"px转vw和vh换算小工具"就是这样一个实用工具，它能...
vw和vh
weixin_45899362的博客
03-06 9350
1.基本概念 vw/vh是一个相对单位（类似于em,rem) vw：viewport width 视口宽度单位 vh：viewport height 视口高度单位 相对视口的尺寸计算结果 1vw = 1/100视口宽度 1vh = 1/100视口高度 注意：和百分比是有区别的，百分比时相对于父元素来说得，而vw和vh总是针对于视口来说的。 2.使用vw 开发设计中使用vw，需要使用像素大厨将模式改为2X 使用vw，还原设计稿需要做 确定设计稿视口宽度。如375 直接使用测量数值/（视口宽度/
vw\vh的介绍
Be myself
03-06 4598
vw\vh的介绍？ 1.什么事vw(Viewport Width)和vh（Viewport Height）？ 1.1 vw和vh是前端开发中的一个动态单位，是一个相对于网页视口的单位。 1.2 系统会将视口的宽度和高度分为100份，1vw占用视口宽度的百分之一，1vh占用视口高度的百分之一。 1.3 vw、vh和百分比不同的是，百分比永远都是以父元素为参考，而vw、vh是以视口作为参考。 结论：vw、vh是一个动态的单位，会随着视口的变化而变化（相对单位）。 2.什么是v...
vh
weixin_44215554的博客
12-22 991
nzs5e4e## sfc zfr在这里插入代码片 vdrx## ve## ~~ [ ] 标题 ~~
纯css3使用vw和vh实现自适应的方法
09-24
【纯CSS3使用vw和vh实现自适应的方法】 在网页设计中，自适应布局是确保内容在不同设备上都能良好展示的关键。CSS3引入了一种新的解决方案，即使用`vw`和`vh`单位，来简化响应式设计的实现过程。`vw`和`vh`单位基于...
css3新单位vw、vh的使用教程
09-24
主要介绍了css3新单位vw、vh的使用教程，本文通过实例代码给大家介绍vw、vh、vmin、vmax 的含义及vw、vh与%百分比的区别，感兴趣的朋友一起看看吧
浅谈css3新单位vw、vh、vmin、vmax的使用详解
09-24
CSS3中的视窗单位vw、vh、vmin和vmax为现代网页设计提供了更灵活的布局方式，尤其在响应式设计中发挥着重要作用。这些单位允许开发者基于浏览器的视窗大小来定义元素的尺寸，而不是依赖于父元素或固定像素值。 1. *...
px2vw一个px单位转成vw单位的VSCode插件
08-12
这个插件的标题是"px单位转成vw单位的VSCode插件"，它旨在帮助开发者快速、方便地将像素（px）单位转换为视口宽度单位（vw），以实现更灵活的响应式设计。 **px与vw单位介绍** 像素（px）是传统Web开发中最常用的...
vw,vh你知道多少
weixin_30832405的博客
07-29 876
css3自适应布局单位vw,vh你知道多少？ 根据CSS3规范，视口单位主要包括以下4个： 1.vw：1vw等于视口宽度的1%。 2.vh：1vh等于视口高度的1%。 3.vmin：选取vw和vh中最小的那个。 4.vmax：选取vw和vh中最大的那个。 vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比...
css--vw和vh
weixin_41682025的博客
12-21 223
https://www.jianshu.com/p/d3e921fc4bd0
vw和vh布局
Heimaxiaozou的博客
07-28 619
我们设计稿是iphone678是375px，vw把屏幕划分了100等份，则1vw=3.75px。有个盒子啊，我测量了下，他的宽度是3.75px*3.75px，则写成vw是多少？又一个盒子，宽度和高度分别是37.5px和37.5px，则转换为vw是多少？有一个盒子68px*29px，则我们写代码lessvw？假如父盒子是200px，则1%是2px。vw就是视口的宽度，vw是个相对单位。1vw=1/100屏幕的宽度。...
响应式布局中的vw-vh
aliven1的博客
09-24 501
根据CSS3规范，视口单位主要包括以下4个： 1.vw：1vw等于视口宽度的1%。 2.vh：1vh等于视口高度的1%。 3.vmin：选取vw和vh中最小的那个。 4.vmax：选取vw和vh中最大的那个。 ...
vw/vh：移动适配之vw/vh(使用方法)
weixin_46682277的博客
12-23 4642
使用vw/vh布局，可以实现视口宽度不同，网页元素宽高等比缩放效果，比rem的优势在于，在代码中直接写vw/vh就能实现移动适配效果，不用引入js文件，比rem更简单，但有兼容问题，目前大厂已经转型到了vw。 vw/vh是相对单位，vw相对视口的宽度，vh相对视口的高度。 1vw = 1/100的视口宽度，1vh = 1/100的视口高度。 比如iphone6/7/8的视口宽是375，换算成vw就是3.75。 但实际开发中用vw最多，因为vh是相对视口高度计算尺寸的，一般我们都是相对的视口宽，而且使用vh需
vh和vw是什么单位？
热门推荐
HXR1984的博客
04-16 1万+
在css3中，vh和vw是视口单位，是相对长度单位。 文章目录前言一、视口单位（ Viewport units )1.在pc端2.在移动端二、常见单位及使用1.常见单位2.使用 前言 提示：以下所有内容，仅为个人经验总结，非专业解释 在学习css时，除了px像素，我们还经常遇到vh和vw这两个单位，那这两个单位具体是什么呢，怎么使用呢？ 一、视口单位（ Viewport units ) 想了解vh和vw，首先我们需要知道什么是视口。顾名思义，视口即为可视窗口。 分两种情况： 1.在pc端 视口指：p.
视区单位vw, vh简介以及可实际应用场景
qq_43477721的博客
10-26 1997
基本概念 vw和vh：视口单位中的“视口”，桌面端指的是浏览器的可视区域，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。1vw等于视口宽度的1%。1vh等于视口高度的1%。 vmin和vmax：vmin为当前vw 和vh中较小的一个值；vmax为较大的一个值。 怎么证明 你猜 是浏览器内部宽度大小(window.innerWidth)？是整个浏览器的宽度大小(window.outerWidth)？还是显示器的宽度大小(screen.width)？ 上代码 <!DOCTYPE html>.
单位 vw 和单位 vh
weixin_43117402的博客
02-19 722
vw 和 vh 也是相对长度单位。 1 vw = 1/100 视口宽度； 1 vh = 1/100 视口高度； 模态框的半透明覆盖层的特征即大小覆盖整个视口，现在我们用vh和vw做上面“下载chrome浏览器”的模态框的半透明覆盖层： 1 设置模态框蒙层的大小为视口大小： // 将蒙层的宽高设置为视口的宽度和高度 width: 100vw; height: 100vh; 2 将模态框蒙层用...
rem和vw/vh的优缺点
最新发布
06-06
rem和vw/vh都是用于响应式布局的单位，但它们各有优缺点。 rem是相对于根元素（html标签）的字体大小来计算的单位，它的优点是可以实现相对于基础字体大小的等比缩放，使得整个页面的比例关系保持一致。但是rem的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值