VW和VH移动端布局

最新推荐文章于 2023-04-23 11:11:38 发布
最新推荐文章于 2023-04-23 11:11:38 发布
阅读量356 收藏 1
点赞数
文章标签： css3 css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linziwang/article/details/121705263
版权

一、VW和VH

1.2、VW/VH是什么

1.2.1、vw/vh是一个相对单位（类似em和rem相对单位）

  • VW是: viewport width视口宽度单位
  • VH是: viewport height视口高度单位

1.3、 相对视口的尺寸计算结果

  • 1vw=1/100视口宽度
  • 1vh=1/100视口高度
    例如:当前屏幕视口是375像素，则1ww就是3.75像素，如果当前屏幕视口为414，则1vw就是4.14像素
    注意事项：和百分比有区别的，百分比是相对于父元素来说的，而VW和VH总是针对于当前视口来说的
    在这里插入图片描述

1.4、VW/VH怎么使用

  • 超级简单，元素单位直接使用新单位vw/vh即可。
  • 因为vw/vh是相对单位，所以不同视口（屏幕）下，宽高一起变化完成适配。

1.4.1、如何还原设计稿

  • 前提:我们设计稿按照 iPhone678来设计，有个盒子是50像素*50像素的，如何使用VW呢？
    分析
  • ①:设计稿参照 Iphone678，所以视口宽度尺寸是375像素（像素大厨切换到2X模式）
  • ②:那么1W是多少像素？375px/100=3.75px
  • ③:我们元素的目标是多少像素？
  • 50px * 50px
  • ④:那么50*50是多少个vw？
  • 50/3.75=13.3333VW
  • 因为设计到大量除法，还是适应LESS搭配更好点。
  • 我们本质是根据视口宽度来等比例缩放页面元素高度和宽度的，所以开发中使用vw就基本够用了 vh很少使用
  • 兼容性:网站:https://caniuse.com/

1.6、px转成vw插件

## 1.5、VW注意事项

豆沙包(干饭王)
关注
vw和vh布局
HXL521666的博客
11-20 2934
vw/vh是什么？ vw/vh 是一个相对单位（类似 em 和 rem 相对单位） vw 是：viewport width 视口宽度单位 vh 是：viewport height 视口高度单位 相对视口的尺寸计算结果 1vw = 1/100 视口宽度 1vh = 1/100 视口高度 例如： 当前屏幕视口是 375px，则 1vw 就是 3.75px，如果当前屏幕视口为 414px，则 1vw 就是 4.14px。 注意：和百分比有区别，百分比是相对于父元素来说的，而 vw 和.
css3自适应布局单位vw,vh
weixin_42371145的博客
06-03 408
转自https://www.cnblogs.com/luxiaoxing/p/7544375.html 视口单位(Viewport units) 什么是视口？ 在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。 视口单位中的“视口”，桌面...
CSS vw / vh 移动端布局
Discowei的博客
07-11 542
CSS vw / vh 移动端布局 移动端布局 flex 布局 : 单维度适配 为了可以适配移动端，页面元素需要高度和宽度同时等比例缩放 移动端适配方案 rem 和 vw & vh比较 rem vw/vh 需要不断修改html文字大小 省去各种判断和修改 需要媒体查询@media 不需要@media 需要flexable.js监测屏幕变化 不需要额外监测 什么是vw / vh vw 和 vh是一个相对单位（原理类似em或者rem） vw ：viewport widt
移动端vw/vh
gako15587481707的博客
05-19 815
vw vw就是视口的宽度，vw 是个相对单位。 不管在什么屏幕下， 我们把屏幕分为平均的 100等份。 1vw = 1 / 100 屏幕的宽度 1vw 和 1% width: 1vw; width: 1%; vw 和 1% 有没有区别： vw 永远是以视口的宽度为准。· 在 375设计稿下， 1vw 永远是 3.75px 百分比以父盒子为准。 假如父盒子是 200px，则 1% 是 2px px 如何转为vw 我们设计稿是 iphone 678 是 375px， vw
十四、vw vh移动端布局，关于移动端的两种布局以及常用单位
快乐de馒头
09-05 3015
移动端常用的布局、；
vw/vh 加 flex 移动端布局
m0_66156767的博客
05-21 539
使用 vw 不需要像 rem 一样要加入 js 代码，可以直接使用十分方便！！
浅析rem和em和px vh vw和% 移动端长度单位
09-24
px单位适合于精确控制布局，em和rem适用于响应式布局和字体大小的自适应，而vh和vw适合于视口相关元素的尺寸控制。百分比单位则提供了灵活的宽高比例控制。前端开发者在制作移动端页面时，经常会采用rem或em单位，并...
【新】移动端web （flex布局 rem / vw vh 布局）
chenlaining的博客
04-26 436
1.pc端和移动端网页的不同点 ①pc屏幕大，网页用版心 ②手机屏幕小，网页宽度多数为100% 2.分辨率（越高越好） 物理分辨率：生产屏幕时就固定的，不可被改变 逻辑分辨率（设备宽度）：由软件驱动所决定 （制作网页时考虑）375×667 3.视口（viewport）：浏览器显示页面内容的屏幕区域 无视口标签则宽度为980像素（默认） 使用mate标签设置视口宽度，制作适配不同设备宽度的网页（自动生成） 作用：设定html的宽度，使所制作的网页宽度与其设备相适应 pc端的视口尺寸不一致，根
如何利用vw+rem进行移动端布局
11-20
总的来说，vw+rem布局方案提供了一种更简洁、高效的方法来处理移动端布局，减少了JavaScript的依赖，提高了代码的可读性和维护性。结合使用其他视口单位和适当的meta标签配置，可以实现更为精确的跨设备页面适配。...
vw / vh属性布局了解及使用
m0_62181310的博客
04-28 4690
使用vw布局方案，实现视口宽度不同，网页元素宽高等比缩放效果 目录 一、vw和vh基本使用 二、vw和vh布局流程 三、vh布局弊端 一、vw和vh基本使用 vw和vh为相对单位，相对视口尺寸计算结果 1vw = 1/100视口宽度 1vh = 1/100视口高度 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <m.
css3自适应布局单位vw,vh详解
qq_36453396的博客
09-18 821
视口单位(Viewport units) 什么是视口？ 在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。 视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport,“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight..
vw vh移动端布局
kaieew12345的博客
08-26 283
1.移动端布局 移动端布局—flex布局 为了实现可以适配移动端，页面元素可以宽度和高度等比例缩放 需要移动端适配有如下方案： 2.vw/vh是什么 1.vw/vh是一个相对单位（类似em和rem相对单位） vw是：viewport width 视口宽度单位 vh是： viewport height 视口高度单位 2.相对视口的尺寸计算结果 1vw = 1/100视口宽度 1vh = 1/100视口高度 例如： 当前屏幕视口是 375像素，则 1vw 就是 3.75 像素， 如果当前屏幕视口
vw布局
weixin_64252848的博客
01-03 1137
vw布局: vw就是视口的宽度，vw 是个相对单位。 不管在什么屏幕下， 我们把屏幕分为平均的 100等份。 1vw = 1 / 100 屏幕的宽度 1vw 和 1% widith: 1vw; width: 1%; vw 和 1% 有没有区别： vw 永远是以视口的宽度为准。· 在 375设计稿下， 1vw 永远是 3.75px 百分比以父盒子为准。 假如父盒子是 200px，则 1% 是 2px px 如何转为vw 我们设计稿是 iphone 678 是 375px， vw 把屏幕划分了100等份， 则
VW布局。
m0_74899618的博客
02-22 147
<!-- vw布局--改变font-size的属性值，不需要js文件 --> <!-- vw viewport width 视口单位，将视口宽度平均分为100份 vh viewport height 视口单位，将视口高度平均分为100份 750px=100vw 1vw=7.5px 850px:分为100份 3vw=25.5px=3*8.5 ●优
移动端开发vw+rem布局，即等比缩放布局（什么是vw?如何设置根元素html的字体大小？如何换算vw单位？文末：移动端开发步骤详解链接）
小福气的博客
08-05 1327
1 什么是vw? vw是一种视窗单位，也是相对单位。相对于视口的宽度，视口被均分为100单位的vw。能够实现页面内的字体大小跟随视口的大小而改变。 1vw 视口宽度的1% 100vw 视口宽度的100% 1vh 视口高度的1% 100vh 视口高度的100% 2为什么要将根元素html字体大小设置为100px？ 是为了方便计算。 我们都知道，根元素默认的字体大小是12px,即 html{...
了解vw布局
weixin_34138377的博客
06-06 354
vw是相对于不同屏幕大小的自适应的布局单位： 1vw相当于整个屏幕宽度的100分之1，如果给最外层div设置宽度为100vw，无论屏幕变大变小，1vw始终代表当前屏幕宽度的100/1； 因此vw在实际运用中： 对于宽度来说：设计图中当前元素宽度的px值 除以 设计图的宽度值，再乘以100后，加上vw单位即是当前元素的vw宽度； 对于高度来说：设计图中当前元素高度的px值 除以 设计图的宽度...
rem&vw布局
xiangxiongfly
04-23 446
rem是相对于根元素（html元素）的字体大小来计算的，因此可以根据不同的屏幕尺寸和设备类型自动调整。通常情况下，我们会将根元素的字体大小设置为一个固定值，然后使用rem单位来定义其他元素的尺寸和位置。这里将屏幕宽划分为10等份，计算每1份的值，将其赋值给根元素的fontSize，也就是1rem的值。 vw布局是一种响应式设计的布局方式，它可以根据不同的屏幕尺寸和设备类型自动调整页面布局。vw布局使用相对单位（vw）来定义元素的尺寸和位置，而不是使用固定的像素值。这使得页面可以在不同的设备上自适应，并且可
rem和vw布局
visibleforest的博客
09-11 1173
1.rem布局的原理 我们使用rem布局主要是为了实现容器的宽高可以等比例放大或缩小。我们用rem作为容器宽和高的单位，rem是相对单位，1rem=html字体的大小，所以我们只需要在屏幕发生变化时，修改html的字体大小就能实现等比缩放的效果。 那么当前视口宽所对应的html的字体应该是多大呢？ 当前视口html字体 =（设计图的视口宽/设计图html的字体大小） *当前视口宽 ...
在Vue中 使用sass配合 vw vh 做移动端自适应布局
最新发布
06-07
以上示例中，`$base-font-size`和`$base-width`变量定义在`_variables.scss`中，`px2rem()`和`center()`混合宏定义在`_mixins.scss`中，然后在`index.vue`中引入并使用它们来实现移动端自适应布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值