Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >移动适配-vw/wh

移动适配-vw/wh

作者头像
且陶陶
发布于 2023-04-12 07:25:04
发布于 2023-04-12 07:25:04
37600
代码可运行
举报
文章被收录于专栏:Triciaの小世界Triciaの小世界
运行总次数:0
代码可运行

vw/vh

是相对单位

  • vw:viewport width
    • 1vw = 1/100视口宽度
  • vh:viewport height
    • 1vh = 1/100视口高度

vw单位尺寸

1.确定设计稿对应的vw尺寸 (1/100视口宽度)

  • 查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 (1/100 视口宽度)

2.vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )

vh单位尺寸

  1. 确定设计稿对应的vh尺寸(1/100视口高度)
    • 查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸 (1/100 视口高度)
  2. vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )

vw与vh不能混用。因为vh是1/100视口高度,全面屏视口高度尺寸大,如果混用可能会导致盒子变形

例子

vw

HTML文件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vw适配</title>
    <link rel="stylesheet" href="./demo.css">
</head>
<body>
    <div class="box"></div>
</body>
</html>

Less文件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// out: ./demo.css

* {
    margin: 0;
    padding: 0;
}
/* 写一个68×29的盒子.设计稿宽度为 375
 1 vw = 3.75px */

.box {
    width: (68 / 3.75vw);
    height: (29 / 3.75vw);
    background-color:red;
}

vh

HTML文件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vh</title>
    <link rel="stylesheet" href="./demo.css">
</head>
<body>
    <div class="box"></div>
</body>
</html>

Less文件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// out: ./demo.css
* {
    margin: 0;
    padding: 0;
}

/* 写一个68×29的盒子.设计稿高度为 667
 1 vh = 6.67px */
 .box {
     width: (68 / 6.67vh);
     height: (29 / 6.67vh);
     background-color: #246;
 }
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-03-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【Web前端】在 CSS 中调整大小
调整元素的大小是一个重要的技能,CSS 提供了多种方法来控制和调整元素的尺寸,以适应不同的设计需求和屏幕尺寸。
一条晒干的咸鱼
2024/11/19
9040
【Web前端】在 CSS 中调整大小
探讨移动端适配
用截图工具(截图工具测得的像素等于物理像素)测得CSS中的1px 的等于物理像素1px的 那么他们的比值就是1:1
切图仔
2022/09/08
1.6K0
探讨移动端适配
移动适配的长度单位
例:html中字体尺寸为 20px,盒子宽度为 5rem,则最后显示的盒子宽度为 100px。
岳泽以
2022/10/26
1.4K0
移动适配的长度单位
浅谈-web屏幕适配的解决方案
就目前看来,web的屏幕适配是贯穿整个前端行业的,如常见的PC端,移动端,响应式,小程序等。
万少
2025/02/11
1720
浅谈-web屏幕适配的解决方案
css3自适应布局单位vw,vh详解
在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。
TimothyJia
2019/11/12
1.1K0
css3自适应布局单位vw,vh详解
解密CSS单位:px、em、vh的区别与应用
在前端开发中,我们经常听到px、em、vh等单位的名词,但你是否真正理解它们的含义和用法呢?想象一下,如果你是一位魔术师,这些单位就是你的魔法道具,能够帮助你创造出精美的网页效果。但是,每个道具都有自己的特点和用途,只有深入了解它们,才能在实战中游刃有余地使用。现在,就让我们一起来揭开px、em、vh的神秘面纱,探索它们的魅力所在吧!
一只牛博
2025/05/30
1660
解密CSS单位:px、em、vh的区别与应用
前端工程师之移动端布局方案
百分比布局是一种等比例缩放的布局方式,也是移动Web开发中比较常见的布局方式。在CSS代码中需要使用百分比来设置盒子的宽高。
张哥编程
2024/12/13
2980
移动web开发01
今天移动web开发学完了,整理一下思路,移动web首先学习的就是就是flex布局。记录一下flex布局和移动适配的一些知识。
Qwe7
2022/03/19
1.4K0
布局常用解决方案对比(媒体查询、百分比、rem和vw/vh)
简要介绍:前端开发中,静态网页通常需要适应不同分辨率的设备,常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发,分析了px在移动端布局中的不足,接着介绍了几种不同的自适应解决方案。
用户8639654
2021/07/26
2.4K0
盘点:响应式布局的5种实现方式
响应式设计通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容;
艾编程
2022/12/01
2.5K0
盘点:响应式布局的5种实现方式
H5移动端开发学习总结
对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1.首先,选取一款手机的屏幕宽高作为基准(现在一般选取iphone6的375×667)。之前项目中也用到过iphone5的320×568。 2.对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:原先的375×667,就会变成750×1334)。
全栈程序员站长
2022/08/31
1.2K0
H5移动端开发学习总结
移动端适配vw方案
vw是相对单位,1vw表示屏幕宽度的1%。基于此,我们可以把所有需要适配屏幕大小等比缩放的元素都使用vw做为单位。不需要缩放的元素使用px做单位。
小小杰啊
2022/12/21
1.1K0
css移动端适配最佳实践
移动端适配,在移动端里经常有遇到,在不同分辨率移动端设备精确还原UI设计稿,这是一个令人抓狂的问题,好在有flex,box布局解决了自适应很大一部分问题。
Maic
2022/12/21
1.1K0
css移动端适配最佳实践
震惊!CSS 竟然能获取视口尺寸?
在这篇文章中,我们将探讨如何使用 CSS 获取视口尺寸,并展示一个简单的实现示例。
Cell
2024/12/07
3420
细说移动端 经典的REM布局 与 新秀VW布局
说到前端页面的布局方案,可以从远古时代的Table布局说起,然后来到 DIV+CSS布局,之后有了Float布局,Flex布局,Column布局,Grid布局等等。
书童小二
2018/10/09
12.2K0
细说移动端 经典的REM布局 与 新秀VW布局
H5页面适配及微信默认字号问题的最佳实践
移动端适配最简单的是通过js动态计算 viewport 的缩放值,但过于粗暴,会导致页面图片文字失真模糊。目前,移动端页面一般使用 rem 或 vw / vh 开发会较为方便,下面以 rem 为例:
CS逍遥剑仙
2021/04/04
3.8K0
postcss-px-to-viewport之vw、vh、rem
很久没有做过移动端的项目了,关于移动端的自适应,最早之前用rem,我个人觉得效果很不错。忘记是哪个大神的文章提到过,lib-flexible有一些问题,建议使用viewport,今天使用一下viewport。
wade
2021/07/08
1.8K0
postcss-px-to-viewport之vw、vh、rem
移动端布局(大结局)之vw和vh
和百分比有区别的,百分比是相对于父元素来说的,而vw和vh总是针对当前视口来说的.
y191024
2022/09/20
1.1K0
移动端布局(大结局)之vw和vh
rem适配移动端的原理及应用场景
我们h5项目终端适配采用的是淘宝那套《Flexible实现手淘H5页面的终端适配》方案。主要原理是rem布局。最近和别人谈弹性布局原理,发现虽然已经使用了那套方案很久,但是自己对rem的理解很含糊, 包括vw、vh等。所以打算写博客总结一下,以加深理解。
前端老道
2022/03/29
1.8K0
rem适配移动端的原理及应用场景
移动适配-rem
注意: 如果电脑显示的缩放为125%,那么给媒体特性设置宽度时只设置手机型号的宽度不起作用。(因为电脑显示的手机宽度是 :125%×真实手机宽度)
且陶陶
2023/04/12
1.6K0
相关推荐
【Web前端】在 CSS 中调整大小
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验