移动端布局方式——百分比和vw，vh区别

最新推荐文章于 2024-03-21 13:36:06 发布

weixin_44312657

最新推荐文章于 2024-03-21 13:36:06 发布

阅读量918

点赞数

文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_44312657/article/details/122038423

版权

本文详细介绍了视窗单位vw和vh的概念及其应用场景。vw和vh分别代表视窗宽度和高度的百分比单位，常用于响应式网页设计中，以实现页面元素随设备屏幕尺寸变化而自动调整大小的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.百分比

a.高度使用百分比 => 有问题 (高度自适应或者写定值)

b.百分比相对父元素 => 计算起来比较麻烦

2.vw 和 vh

vw (viewpoint width) 视窗宽度 => 移动端(设备的宽度) 1vw等于视窗宽度的1%

vh (viewpoint height) 视窗高度 => 移动端(设备的高度) 1vw等于视窗高度的1%

vw 和 vh 本质也是百分比 => 相对于视窗宽度 => 移动端(设备的宽度)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_44312657

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

前端基础面试题：rem em vw vw 百分比区别？

sdasadasds的博客

07-28

538

注意vw和vh是视口可以观看的区域的大小；如果没有滚动条的话，则宽度设置成100vw和100%的时候实现的效果一直；如果有滚动的话，则100vw中不是包括滚动条的，100%是包括滚动条的距离的。em如果自身有字体大小的设置，那么就相对于自身字体大小设置，如果自身没有字体大小设置，那么就相当于父元素进行设置。rem，em，vw，vh，vw属于前端开发除了px单位之外的另外几种单位取值；但是具体含义存在区别。px是像素单位，属于绝对单位，是一个具体的大小。陆荣涛前端学习交流Q群858752519。...

移动端布局——移动适配

m0_45659764的博客

04-05

3971

什么叫移动适配？网页元素的宽高都要随着设备的宽度等比缩放如何实现？ rem：目前多数企业再用的解决方案 vw/vh：未来的解决方案一、rem 能够使用rem单位设置网页元素的尺寸网页效果屏幕宽度不同，网页尺寸不同（等比缩放） px单位或百分比布局可以实现吗？ px单位是绝对单位 百分比布局特点宽度自适应，高度固定 rem单位相对单位 rem单位相对于HTML标签（根标签）的字号计算结果 1rem=1HTML字号大小注意：使用re...

参与评论您还未登录，请先登录后发表或查看评论

vw/vh 与 百分比的区别

源辰_付鹏程

05-29

2474

首先，vw与vh是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。 vh和vw是要优于rem的，但是兼容性比较差，建议PC端可以优先使用 百分比就不多解释了，都明白，那么来看看区别首先，vw，在浏览器没有横向滚动条的时候，vw和百分比，没多少区别，可能唯一的区别在于，百分比依赖父级大小，而vw没有，vw的浏览

em，rem，和百分比，vw，vh的比较

andy00614的博客

07-19

1249

一个普通标题 em rem 百分比 vw,vh 字体继承子元素字体 1em = 父元素 font-size值根目录下的font-size（元素下的）字体自己设置就行将可视区域平分100分，为1vw，1vh padding，margin，width，height 1em = 该元素的font-size 根目录下的font-s...

css样式中的vw什么意思,CSS 中 vw 和 % 有什么区别吗?

weixin_29913663的博客

08-03

1329

CSS 中 vw 和 % 有什么区别吗?% 单位%(百分比)是一个相对长度单位, 相对于包含块 (containing block) 的高宽或字体大小来取值.关于包含块 (containing block) 的概念, 不能简单地理解成是父元素.如果是静态定位和相对定位, 包含块一般就是其父元素.如果是绝对定位的元素, 包含块应该是离它最近的 position 为非 static 属性的祖先元素.如...

vw vh视口百分比

huangli007的博客

11-13

294

链接:http://caibaojian.com/vw-vh.html 根据CSS3规范，视口单位主要包括以下4个： vw : 1vw 等于视口宽度的1% vh : 1vh 等于视口高度的1% vmin : 选取 vw 和 vh 中最小的那个 vmax : 选取 vw 和 vh 中最大的那个 ...

移动端布局方案

WenYan_a的博客

08-15

360

在750px设计搞下，如果使用vw单位换算，可以理解成100vw = 750px，1px = 0.13333333vw；原理：确定基准值以常见的750像素宽度的设计稿为例，根据vw单位的原理100vw = 750px,即 1vw = 7.5px，根据设计稿中的px值，转换成对应的vw值进行布局，也可以直接写px。比如说 html 的 font-size 大小为 100px, 一个 div 的 width 为 1rem，则 div 的 width大小为100px。...

CSS—vw移动端适配

雷雨天的雷胖子

12-29

643

目录一、概述二、详解一、概述在PC端，视口是指浏览器的可视区域。在移动端，视口（viewport）分为三种，其一布局视口，其二视觉视口，其三理想视口。视口单位是CSS3新引入的概念，其中的视口是指PC端浏览器的可视区域和移动端的布局视口。视口单位如下所示。 (1) vw 相对于视口的宽度, 视口宽度是100vw, 1vw = 视口宽度的1% (2) vh 相对于视口...

移动端前端H5模板——自适应响应式网页源码

- **流式布局**：使用百分比或视口单位（vw/vh）来定义元素的尺寸，使布局能够自适应。 - **灵活的图像和媒体**：设置图像和媒体对象为100%宽度或使用`max-width: 100%`确保它们不会溢出容器。 ### 结合压缩包子...

Vue ；pc端使用 vw/vh 实现自定义布局

weixin_60196946的博客

03-29

1681

vw/vh 实现自定义布局

vw和百分比的区别

weixin_45799605的博客

06-25

190

vw和百分比的区别

移动端vw适配（百分比）

qq_44917015的博客

12-06

144

vw和vh是相对单位 1vw==布局视口宽度的1% 1vh==布局视口高度的1% 有严重的兼容性问题可以去caniuse.com去查阅

VW、VH、%的区别和作用以及应用场景

m0_74359467的博客

10-17

1346

%呢他是根据父元素进行定位的，所以你这个项目在你的电脑上是完美的，但是到了别人的电脑上就会出现样式混乱崩塌的效果。所以一般呢再写可视化的时候尽量全用VW和VH，这样你的样式放在任何电脑上都不会出现样式崩塌混乱的样子。：如果是随着父容器或者是整体页面布局而改变尺寸，则使用%更好，如元素的高度和宽度设置。相对长度单位：相对于父元素的百分比值，若父元素宽高改变，子元素会随之改变。如果有哪里说的不对的地方，请多多指教大家一起加油，共同学习！：VH和VW的查究仅次于一个是在于宽度，一个在于高度。

html %与vw的区别

weixin_43639743的博客

09-09

2550

%单位 %（百分比）是一个相对长度单位，相对于包含块（containing block）的高宽或字体大小来取值。关于包含块（containing block）的概念，不能简单地理解成是父元素。如果是静态定位和相对定位，包含块一般就是其父元素。如果是绝对定位的元素，包含块应该是离它最近的 position为非static属性的祖先元素。如果是固定定位的元素，它的包含块是视口（viewport）。 vw单位 vw、vh、vmin、vmax是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。

【移动端布局】2 - 适配方法:百分比适配、viewport缩放适配、dpr缩放适配、rem适配、vw适配

充电五分钟...

03-16

1344

文章目录关于适配1、百分比 适配2、viewport缩放适配3、DPR缩放适配4、rem适配5.1 em 和 rem的区别5.2 rem适配原理5.3 js动态设置html字体大小 - 笨方法，要自己算元素占几个rem5.4 js动态设置html字体大小 - `rem的最优写法`！！！5.4 媒体查询设置html字体大小5、vw适配关于适配适配用来做布局的，移动端比较麻烦-设备太多，尺寸也...

响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）

最新发布

xiaoqin5的博客

03-21

525

响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）

在页面中使用%和vw，基础实现响应式。完美屏幕适配。

qq_45727765的博客

11-09

892

在页面中使用%和vw、vh，基础实现响应式。随着时间的推移，现在已是2019年的今天，你在写页面的时候，页面的宽度还在使用固定的宽高，在不同屏幕大小和不同浏览器的情况下是否也出现过乱码，如何根据屏幕的大小和不同浏览器的情况来设定内容的宽高？你是否还在为以下问题担忧呢？页面内容超出窗口，出现滚动条。内容随着窗口的变化而变型。内容超出盒子模型的宽高，如果设置溢出隐藏，内容被裁剪。页面...

可适应页面中vh和vw和百分比有什么区别，怎样才能合适的使用？

xiaokanfuchen86的博客

09-14

2128

之前还真没注意CSS3里这几个新功能…… 首先%代表相对宽度/高度，问题在于这个值相对什么，不同属性是不一样的，对于block的高度、宽度等，一般相对于父元素，而根元素body在没有定义高度的情况下是没有高度的。对于其他一些属性，比如font-size，相对的是em的大小。而vh、vw不同，永远都是相对于视窗大小的，即便写在font-size里面也是按视窗大小。这个就会有很多很方便的地方了。最主要能解决的一个问题就是原来想要做高度自适应很困难，现在很容易了。一个body{height: 100vh}就

【H5】h5移动端适配

小墨鱼的前端问题录

07-19

2310

在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp；上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率。“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。