移动端vw适配（百分比）

最新推荐文章于 2024-05-24 19:12:54 发布
最新推荐文章于 2024-05-24 19:12:54 发布
阅读量123 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44917015/article/details/121754109
版权
本文介绍了vw和vh这两个相对单位在网页布局中的应用，1vw等于布局视口宽度的1%，1vh等于布局视口高度的1%。然而，它们存在一定的兼容性问题，建议开发者在实际使用时查阅caniuse.com以确保在不同浏览器上的兼容性。
摘要由CSDN通过智能技术生成

vw和vh是相对单位

1vw==布局视口宽度的1%

1vh==布局视口高度的1%

有严重的兼容性问题
可以去caniuse.com去查阅

SpringYoungYu
关注
CSS—vw移动端适配
雷雨天的雷胖子
12-29 610
目录 一、概述 二、详解 一、概述 在PC端，视口是指浏览器的可视区域。在移动端，视口（viewport）分为三种，其一布局视口，其二视觉视口，其三理想视口。视口单位是CSS3新引入的概念，其中的视口是指PC端浏览器的可视区域和移动端的布局视口。视口单位如下所示。 (1) vw 相对于视口的宽度, 视口宽度是100vw, 1vw = 视口宽度的1% (2) vh 相对于视口...
移动端vw vh适配
fuhs_2的博客
01-03 244
vw vh介绍 属于一种新兴的移动端布局配置，功能与rem类似 vw 视口的最大宽度，1vw等于视口宽度的百分之一 vh 视口的最大高度，1vh等于视口高度的百分之一 自动适配 安装依赖 npm install postcss-px-to-viewport -D 修改.postcssrc.js // https://github.com/michael-ciniawsky/postcss-load-config module.exports = { plugins: { auto
【移动端布局】2 - 适配方法:百分比适配、viewport缩放适配、dpr缩放适配、rem适配、vw适配
充电五分钟...
03-16 1186
文章目录关于适配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适配 关于适配 适配用来做布局的，移动端比较麻烦-设备太多，尺寸也...
vw和百分比的区别
weixin_45799605的博客
06-25 156
vw和百分比的区别
vw/vh 与 百分比的区别
源辰_付鹏程
05-29 2390
首先，vw与vh是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。 vh和vw是要优于rem的，但是兼容性比较差，建议PC端可以优先使用 百分比就不多解释了，都明白，那么来看看区别 首先，vw，在浏览器没有横向滚动条的时候，vw和百分比，没多少区别，可能唯一的区别在于，百分比依赖父级大小，而vw没有，vw的浏览
移动端布局方式——百分比和vw，vh区别
weixin_44312657的博客
12-20 862
1.百分比 a.高度使用百分比 => 有问题 (高度自适应或者写定值) b.百分比相对父元素 => 计算起来比较麻烦 2.vw 和 vh vw (viewpoint width) 视窗宽度 => 移动端(设备的宽度) 1vw等于视窗宽度的1% vh (viewpoint height) 视窗高度 => 移动端(设备的高度) 1vw等于视窗高度的1% ...
可适应页面中vh和vw和百分比有什么区别，怎样才能合适的使用？
xiaokanfuchen86的博客
09-14 2060
之前还真没注意CSS3里这几个新功能…… 首先%代表相对宽度/高度，问题在于这个值相对什么，不同属性是不一样的，对于block的高度、宽度等，一般相对于父元素，而根元素body在没有定义高度的情况下是没有高度的。对于其他一些属性，比如font-size，相对的是em的大小。 而vh、vw不同，永远都是相对于视窗大小的，即便写在font-size里面也是按视窗大小。这个就会有很多很方便的地方了。 最主要能解决的一个问题就是原来想要做高度自适应很困难，现在很容易了。一个body{height: 100vh}就
vue3移动端适配的解决方案（老方案）
12-01
Vue3 移动端适配解决方案是针对现代前端框架 Vue3 的一项技术实践，旨在确保在不同设备和屏幕尺寸上提供良好的用户体验。Vue3 提供了更强大的功能和更高的性能，但移动端适配是一个挑战，因为移动设备的屏幕尺寸、...
移动端适配 rem & vw 计算工具
12-29
因此，存在一些在线工具，如"移动端适配 rem & vw 计算工具"，可以帮助开发者快速、准确地进行转换。这些工具通常允许输入px值，并自动计算出对应的`rem`和`vw`值，大大提高了工作效率。 5. **`jqueryremvw`工具** ...
移动端适配：vw适配方案
最新发布
weixin_51416826的博客
05-24 503
vw(Viewport Width) 是一种长度单位，代表视口宽度的百分比。1vw 等于视口宽度的1%。在网页设计和前端开发中，vw 单位常用于实现响应式设计和屏幕适配，尤其是针对不同尺寸和分辨率的移动设备。
vw和%的区别（大厂面试）
yigeyangzhuren的博客
06-11 490
面试题
移动适配 ( VW )
weixin_57320268的博客
02-16 1453
1 vw vw就是视口的宽度，vw 是个相对单位。 不管在什么屏幕下， 我们把屏幕分为平均的 100等份。 1vw = 1 / 100 屏幕的宽度 1vw 和 1% widith: 1vw; width: 1%; vw 和 1% 有没有区别： vw 永远是以视口的宽度为准。· 在 375设计稿下， 1vw 永远是 3.75px 百分比以父盒子为准。 假如父盒子是 200px，则 1% 是 2px 2 width: (68 / 3.75vw); height: (29 .
Css之使用calc()计算宽高（vw/vh）
weixin_45346457的博客
09-16 8678
calc
【CSS笔记】— 使用calc()计算宽高（vw/vh）
weixin_34148508的博客
12-18 1226
【CSS笔记】— 使用calc()计算宽高（vw/vh） calc()是什么？ 简单来说就是CSS3中新增的一个函数，calculate（计算）的缩写。用于动态计算宽/高，你可以使用calc()给元素的各个属性设置值【margin、border、padding、font-size】等， calc()语法 calc的语法就是简单的四则运算， 使用“+”、“-”、“*” 和 “/”四则运算； 可以使...
移动端vw布局详解
热门推荐
zjw0742的博客
02-19 16万+
有关于移动端的适配布局一直以来都是众说纷纭，对应的解决方案也是有很多种。在《使用Flexible实现手淘H5页面的终端适配》提出了Flexible的布局方案，随着viewport单位越来越受到众多浏览器的支持，因此在《再聊移动端页面的适配》一文中提出了vw来做移动端的适配问题。到目前为止不管是哪一种方案，都还存在一定的缺陷。言外之意，还没有哪一个方案是完美的。事实上真的不完美？其实不然。最近为了新...
移动端适配
ply6686的博客
10-24 3399
移动端适配是指在不同尺寸的手机设备上，页面能相对达到合理的展示（响应式）或者保持统一效果的等比缩放（看起来差不多）。本文介绍了移动端适配中需要掌握的基本概念和移动端页面开发中常用的适配方案。 一、基本概念 在做移动端适配之前，我们必须了解一下不同设备之间，显示器或者屏幕究竟有哪些不同。与此相关的概念比较多，也特别容易混淆，这里将对涉及到的主要概念一一介绍。这其中包括硬件中的概念、操作系统或软件中的概念和浏览器中的概念。 如果你觉得混乱了，不要着急，就以 iphone6 为例，细细品味。 1、硬件..
移动端适配-vw例子
qq_37635519的博客
06-16 796
点击查看页面 点击查看源码 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...
自适应布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
Reagan_的博客
04-21 1771
如何在不同分辨率的设备上更好的实现适配？ 本文介绍几种自适应解决方案包括媒体查询、百分比、rem/em和vw/vh。 一、px px不是绝对单位，而是相对单位。 比如1px的文字在pc端和移动端的大小是不一样的。 当通过viewport标签， <meta name="viewport" content="width=device-width"> 设置布局视口为理想视口时，1个css像...
理解前端尺寸 rem ，vh , vw , %的本质
BiuBiu_Tian(田)
05-02 6406
rem、百分比、vh、vw各种布局方式，在兼容不同分辨率的时候，究竟采用哪种方式比较好呢？ 名词介绍： 百分比：就是元素相对于父级的宽度或高度的百分比，比较常用，宽度和高度都可以 rem:本身是百分比的一种变形，但是这个单位只是基于宽度的百分比，不是基于高度的百分比 vh、vw：基于视口的尺寸，1vh = 1% viewportHeight , 1wh = 1% viewportWid...
【移动端布局】抛弃rem，使用vw
04-26 1万+
你还在用rem弹性布局吗？在html文件头部放入一大段压缩过的js代码，是不是让你很难受？来了解下vw吧，能让你的代码更纯粹简单介绍下rem布局方案rem是css中的长度单位，1rem=根元素html的font-size值。当页面中所有元素都使用rem单位时，你只需要改变根元素font-size值，所有元素就会按比例放大或者缩小。因此我们只需要写一小段js代码，根据屏幕宽度改变html的font-s
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值