当前位置：首页 > article >正文

[CSS3]vw/vh移动适配

article 2025/6/6 4:49:12

vw/vh

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

相对单位
相对视口的尺寸计算结果.
vw全称viewport width;

1vw=1/100视口宽度

vh全称viewport height;

1vh=1/100视口高度

体验vw和vh单位

<!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和vh</title><style>* {margin: 0;padding: 0;}/* 1. vw = 1/100视口宽度 *//* 375 / 100 * 50 = 187.5 *//* 375 / 100 * 30 = 112.5 */.box {width: 50vw;height: 30vw;background-color: pink;}/* 2. vh = 1/100视口高度 *//* 667 / 100 * 50 = 333.5 *//* 667 / 100 * 30 = 200.1 */.box {width: 50vh;height: 30vh;background-color: pink;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

vw/vh方案的优势就是不再依赖媒体查询
这里盒子的尺寸和计算值有误差是因我的屏幕分辨率是2k, 逻辑分辨率不同

vw单位换算: 设计稿中的单位一定是px单位, 写代码要写vw单位, 怎么换算呢?

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

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

vw单位的尺寸 = px单位数值 / (1/100 视口宽度)
vh单位的尺寸 = px单位数值 / (1/100 视口高度)
设计稿如下图, 设计稿宽度是375px, 完成尺寸换算

<!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><div class="box2"></div>
</body>
</html>

// out: ./
* {margin: 0;padding: 0;
}// vw单位的尺寸 = px单位数值 / (1/100 视口宽度)
.box {// vwwidth: (68 / 3.75vw);height: (29 / 3.75vw);background-color: pink;
}// vh单位的尺寸 = px单位数值 / (1/100 视口高度)
.box2 {// vhwidth: (68 / 6.67vh);height: (29 / 6.67vh);background-color: green;
}

使用vw和vh两种单位设置盒子尺寸, 最终盒子的大小是一致的
所以开发中使用vw和vh都行
全面屏手机的高度变大, 所以vw和vh单位不能混用, 元素会变形

仿b站首页

准备工作

素材获取: 图片直接右键另存为, 字体图标的下载如下

检查元素, 找到iconfont类名, 点击iconfont样式表

复制字体URL到浏览器地址栏, 回车就能下载字体文件

新建iconfont.css文件, 把样式表的代码复制下来

在原站中复制图标类名使用就行了

新建index.html文件, 新建index.less文件

<!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>B站</title><link rel="stylesheet" href="./fonts/iconfont.css"><link rel="stylesheet" href="./css/index.css">
</head>
<body>
</body>
</html>

@import 'base';

头部区域

<!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>B站</title><link rel="stylesheet" href="./fonts/iconfont.css"><link rel="stylesheet" href="./css/index.css">
</head>
<body><!-- 1. 头部固定 --><header><div class="top"><div class="left"><a href="#"><i class="iconfont Navbar_logo"></i></a></div><div class="right"><a href="#"><i class="iconfont ic_search_tab"></i></a><a href="#" class="login"><img src="./images/login.png" alt=""></a><a href="#" class="download"><img src="./images/download.png" alt=""></a></div></div><div class="bottom"><div class="tab"><ul><li><a href="#" class="current">首页</a></li><li><a href="#">动画</a></li><li><a href="#">番剧</a></li><li><a href="#">国创</a></li><li><a href="#">音乐</a></li></ul></div><div class="more"><a href="#"><i class="iconfont general_pulldown_s"></i></a></div></div></header><!-- 2. 视频区域 --><!-- 3. 按钮固定 -->
</body>
</html>

@import 'base';@vw: 3.75vw;
@color: #fb7299;// 头部 固定
header {position: fixed;left: 0;top: 0;z-index: 1;width: 100%;// width: 100vw;height: (84 / @vw);background-color: #fff;// top.top {display: flex;justify-content: space-between;align-items: center;height: (44 / @vw);padding-left: (18 / @vw);padding-right: (12 / @vw);.left {.iconfont {font-size: (28 / @vw);color: @color;}}.right {display: flex;.iconfont {font-size: (22 / @vw);color: #ccc;}.login {width: (24 / @vw);height: (24 / @vw);margin-left: (24 / @vw);}.download {width: (72 / @vw);height: (24 / @vw);margin-left: (24 / @vw);}}}// bottom.bottom {display: flex;justify-content: space-between;height: (40 / @vw);border-bottom: 1px solid #eee;.more {a {display: block;width: (40 / @vw);height: (40 / @vw);// background-color: pink;text-align: center;line-height: (40 / @vw);// font-size: (22 / @vw);color: #ccc;.iconfont {font-size: (22 / @vw);}}}.tab {ul {display: flex;li {padding: 0 (16 / @vw);a {display: block;height: (38 / @vw);line-height: (38 / @vw);font-size: (14 / @vw);&.current {color: @color;border-bottom: 2px solid @color;}}}}}}
}

视频区域

视频区域布局分析:

父级设置左右padding
每个视频盒子宽度为50%左右padding(拉开内容的距离)
完成两列盒子三距等宽的视觉效果

<!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>B站</title><link rel="stylesheet" href="./fonts/iconfont.css"><link rel="stylesheet" href="./css/index.css">
</head>
<body><!-- 1. 头部固定 --><!-- 2. 视频 --><!-- 视频区域布局 --><section class="video_content"><!-- 一份视频, 共计有5个菜单, 应该有5份视频的div --><div class="video_list"><a href="#"><div class="pic"><img src="./images/1.jpg" alt=""><div class="count"><p><i class="iconfont icon_shipin_bofangshu"></i><span>132</span>万</p><p><i class="iconfont icon_shipin_danmushu"></i><span>2.4</span>万</p></div></div><div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div></a><a href="#"><div class="pic"><img src="./images/1.jpg" alt=""><div class="count"><p><i class="iconfont icon_shipin_bofangshu"></i><span>132</span>万</p><p><i class="iconfont icon_shipin_danmushu"></i><span>2.4</span>万</p></div></div><div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div></a></div></section><!-- 3. 按钮固定 -->
</body>
</html>

@import 'base';@vw: 3.75vw;
@color: #fb7299;// 视频
.video_content {padding: (84 / @vw) (5 / @vw) 0;.video_list {display: flex;// 弹性盒子换行flex-wrap: wrap;a {width: 50%;padding: (8 / @vw) (5 / @vw);// background-color: pink;font-size: (12 / @vw);.txt {margin-top: (5 / @vw);}.pic {position: relative;.count {position: absolute;left: 0;bottom: 0;display: flex;justify-content: space-between;width: 100%;padding: (8 / @vw);background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));color: #fff;i {vertical-align: middle;}}}}}
}

[CSS3]vw/vh移动适配

vw/vh 目标: 能够使用vw单位设置网页元素的尺寸相对单位相对视口的尺寸计算结果.vw全称viewport width; 1vw1/100视口宽度 vh全称viewport height; 1vh1/100视口高度体验vw和vh单位 <!DOCTYPE html> <html lang"en"> <head><meta charset…...

编程日记 2025/6/6 4:49:12

Python进阶与常用库：探索高效编程的奥秘

一、文件与目录操作：os模块 os模块是Python标准库中用于与操作系统交互的核心工具，提供了丰富的文件和目录操作方法。通过os，开发者可以轻松实现文件路径处理、环境变量获取、目录管理等功能。 1.1 核心功能与方法以下是os模块中常用的方…...

编程日记 2025/6/5 11:56:07

nt!MiDispatchFault函数分析之nt!MiCompleteProtoPteFault函数的作用

nt!MiDispatchFault函数分析之nt!MiCompleteProtoPteFault函数的作用第一部分： // // PTE is still in transition state, same protection, etc. // ASSERT (Pfn1->u4.InPageError 0); if (Pfn1->u2.ShareCount 0) { MI_REMO…...

编程日记 2025/6/5 4:37:45

YOLOX 的动态标签分类（如 SimOTA）与 Anchor-free 机制解析2025.5.29

YOLOX 的动态标签分类（如 SimOTA）与 Anchor-free 机制是其核心改进中的两个关键部分，它们在目标检测中的作用和实现方式存在显著差异。以下从原理、实现细节及效果三个方面进行详细对比： 一、核心原理与目标 1. Anchor-free 机制…...

编程日记 2025/6/6 0:11:43

打卡day42

DAY 42 Grad-CAM与Hook函数知识点回顾回调函数lambda函数hook函数的模块钩子和张量钩子Grad-CAM的示例作业：理解下今天的代码即可 1、回调函数回调函数（Callback Function）是一种特殊的函数，它作为参数传递给另一个函数&am…...

编程日记 2025/6/5 10:21:58

小白的进阶之路系列之八----人工智能从初步到精通pytorch综合运用的讲解第一部分

PyTorch Tensors 通过大量实例学习编程应用是最有效的方法。本篇是PyTorch综合运用，旨在让读者通过一行行代码亲自掌握Pytorch工具包的各种功能，有利于大家部署自己的神经网络人工智能计算工程。首先，载入torch库。 import torch我们来看看一些基本的张量操作。首先，…...

编程日记 2025/6/4 8:31:43

724.寻找数组的中心下标前缀和

题目链接： https://leetcode.cn/problems/find-pivot-index/ 这道题目我们可以使用暴力解法，就一个下标前数组之和，再求一个下标后数组之和，时间复杂度达到n方，我们来写一下： int pivotIndex(vector<in…...

编程日记 2025/6/3 21:12:34

软考-系统架构设计师-第十六章层次式架构设计理论与实践

层次式架构设计理论与实践 16.2 表现层框架设计16.3 中间层框架设计16.4 数据访问层设计16.5 数据架构规划与设计16.6 物联网层次架构设计软件体系结构为软件系统提供了结构、行为和属性的高级抽象，由构成系统的元素描述这些元素的相互作用、指导元素集成的模式以及…...

编程日记 2025/6/4 13:22:35

甘特图 dhtmlxGantt.js UA实例

摘要：本文介绍了一个基于AngularJS的排产资源占用甘特图系统，包含前端界面展示和后端控制逻辑。系统通过HTML模板实现甘特图展示区域、查询条件表单和数据绑定，使用JavaScript控制器处理数据查询、甘特图初始化和交互逻辑。主要功能包括&…...

编程日记 2025/6/4 13:09:11

Docker学习笔记：基础知识

本文是自己的学习笔记 1、什么是Docker2、Docker的架构设计2.1、镜像（Image）2.2、容器（Container）2.3、仓库（Repository)2.4、Docker使用场景案例 1、什么是Docker Docker是基于Go语言实现的云开源项目。它的角色是作…...

编程日记 2025/6/6 8:45:39

5.2 初识Spark Streaming

在本节实战中，我们初步探索了Spark Streaming，它是Spark的流式数据处理子框架，具备高吞吐量、可伸缩性和强容错能力。我们了解了Spark Streaming的基本概念和运行原理，并通过两个案例演示了如何利用Spark Streaming实现词频统计。…...

编程日记 2025/6/4 13:49:56

uv：一个现代化的 Python 依赖管理工具

在 Python 的生态系统中，依赖管理和 Python 版本管理一直是开发者关注的核心问题。传统的工具如 pip、poetry 和 pyenv 虽然功能强大，但在性能和使用体验上仍有改进空间。uv 是由 Python 核心开发者开发的现代化依赖管理工具，旨在提供更快、…...

编程日记 2025/6/4 13:19:57

Python趣学篇：交互式词云生成器（jieba + Tkinter + WordCloud等）

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 目录一、为什么要做词云？让文字"活"起来！二、核心…...

编程日记 2025/6/5 3:01:21

理解解释器架构：原理、组成与运行机制全解析

目录前言1. 什么是解释器架构2. 解释器的基本组成2.1 被解释执行的程序2.2 解释器引擎2.3 解释器内部状态2.4 程序执行的当前状态2.5 存储器模型 3. 解释器的工作原理3.1 解析源代码3.2 初始化运行环境3.3 逐条执行语法结构3.4 维护程序状态3.5 内存管理与变量作用域 4. 举例&…...

编程日记 2025/6/5 1:52:05

2025华为OD机试真题+全流程解析+备考攻略+经验分享+Java/python/JavaScript/C++/C/GO六种语言最佳实现

华为OD全流程解析，备考攻略快捷目录华为OD全流程解析，备考攻略一、什么是华为OD？二、什么是华为OD机试？三、华为OD面试流程四、华为OD薪资待遇及职级体系五、ABCDE卷类型及特点六、题型与考点七、机试备考策略八、薪资与转正九、…...

编程日记 2025/6/5 10:22:34

Python应用for循环临时变量作用域

大家好!如果你刚开始学习Python，可能会对for循环中临时变量的作用域感到好奇。下面通过一个简单的练习，帮助你理解这个概念。代码呈现: i 0 for i in range(5):print(i)print(i)代码介绍: 首先我们初始化变量i 0然后进入for循环，这里i成为…...

编程日记 2025/6/5 8:48:43

设计模式——桥接设计模式（结构型）

摘要桥接设计模式是一种结构型设计模式，用于将抽象与实现解耦，使二者可以独立变化。它通过将一个类拆分为“抽象”和“实现”两部分，并通过桥接关系组合，避免了类继承层次结构过于庞大。桥接模式包含抽象类、扩充抽象类、实现类…...

编程日记 2025/6/5 15:25:45

LLaDa——基于 Diffusion 的大语言模型打平 LLama 3

这里分享一篇文章《Large Language Diffusion Models》，来自人民大学高领人工智能学院，一篇尝试改变传统自回归范（预测下一个token） LLM 架构，探索扩散模型在 LLM 上的作用，通过随机掩码-预测逆向思维&…...

编程日记 2025/6/5 13:27:25

Apache SeaTunnel部署技术详解：模式选择、技巧与最佳实践

Apache SeaTunnel（原Waterdrop）作为高性能、分布式数据集成平台，支持海量数据的离线与实时同步。其灵活多样的部署模式可适配不同规模的生产环境需求。本文将系统解析SeaTunnel的部署架构、技术要点及最佳实践，帮助用户高效构建稳…...

编程日记 2025/6/5 6:54:41

2. 数据结构基本概念 (2)

本文部分ppt、视频截图来自：[青岛大学-王卓老师的个人空间-王卓老师个人主页-哔哩哔哩视频] 1. 数据结构基本概念 1.1 数据类型和抽象数据类型 (1) 数据类型(Data Type) 概念数据类型是一组性质相同的值的集合以及定义于这个值集合上的一组操作的总称。在使用…...

编程日记 2025/6/5 15:55:13

鸿蒙5.0+ 多协议设备发现与分布式软总线技术实践

一、技术演进与架构升级 1.1 多协议发现机制演进鸿蒙5.0重构设备发现层，支持三模异构发现： 经典蓝牙（BLE 5.2）：低功耗设备发现Wi-Fi Aware：高带宽设备预连接PLC&#xff0…...

编程日记 2025/6/5 5:23:09

STM32F407寄存器操作（多通道单ADC+DMA）

1.前言又是半年没更新了，趁着端午放假有点时间，并且最近项目要用这块知识，我就顺带研究一下ADC吧。一般来说ADC主要用法包含了1.单通道软件触发（这是最简单和最常用的用法）2.单通道多次采集（需要快速采…...

编程日记 2025/6/6 0:30:53

基于React和TypeScript的金融市场模拟器开发与模式分析

基于React和TypeScript的金融市场模拟器开发与模式分析项目概述本项目开发了一个基于React和TypeScript的金融市场模拟器，通过模拟订单流和价格发现机制，重现了真实市场的动态特性。该模拟器不仅提供了实时价格图表、订单簿和交易功能，还…...

编程日记 2025/6/5 11:52:42

剑指offer13_剪绳子

剪绳子给你一根长度为 n 绳子，请把绳子剪成 m 段（m、n都是整数，2≤n≤58 并且 m≥2）。每段的绳子的长度记为 k[1]、k[2]、……、k[m]。 k[1]k[2]…k[m] 可能的最大乘积是多少？ 例如当绳子的长度是 8 时&#xff0…...

编程日记 2025/6/4 13:39:22

reverse_ssh 建立反向 SSH 连接指南混淆AV [好东西哟]

目录 🌐 工具简介 ⚙️ 前提条件攻击主机 (Linux) 目标主机 (Windows) 📋 详细步骤步骤 1：安装 Go 环境步骤 2：安装必要依赖步骤 3：下载并编译 reverse_ssh 步骤 4：配置密钥步骤 5&#xff…...

编程日记 2025/6/6 9:45:30

vue+elementUi+axios实现分页(MyBatis、Servlet)

vueelementUiaxios实现分页文章目录 vueelementUiaxios实现分页1.代码实现【HTML】**【Servlet层】****【Service层】****【Dao层】** 2.总结步骤3.实现要点4.注意事项4.注意事项注：此项目前端为 html、后端采用 mybatis、servlet实现 1.代码实现【HTML】…...

编程日记 2025/6/4 3:44:39

WebBuilder数据库：企业数据管理的能力引擎

在数据成为核心生产要素的时代，企业对数据库的需求早已超越“存储与查询”的基础功能，转而追求高性能、高安全、高兼容与高效开发的综合能力。WebBuilder作为企业级快速开发平台的佼佼者，其数据库能力正式破解数据管理难题的关键钥匙。本文将…...

编程日记 2025/6/5 8:37:30

QtWidgets，QtCore，QtGui

目录三者的关系示例代码主要功能模块QtCore**一、核心功能与常用类****1. 信号与槽机制（Signals and Slots）****2. 事件处理（Event Handling）****3. 定时器（Timers）****4. 线程（Threading）****5. 文件与目录操作****6. 属性系统（Property System）****二、高级特性**…...

编程日记 2025/6/5 22:14:49

lvs-keepalived高可用群集

目录 1.Keepalived 概述及安装 1.1 Keepalived 的热备方式 1.2 keepalived的安装与服务控制 （1）安装keep alived (2)控制 Keepalived 服务DNF 安装 keepalived 后,执行以下命令将keepalived 服务设置为开机启动。 2.使用 Keepalived 实现双机热备 …...

编程日记 2025/6/5 10:49:32

【Elasticsearch】suggest

在Elasticsearch中，suggest 是一个非常强大的功能，用于实现自动补全、拼写纠错和模糊搜索等功能。它可以帮助用户更快地找到他们想要的内容，同时提升搜索体验。以下是关于 suggest 的详细使用方法和常见场景。 1\. Suggest 的基本概念 sugges…...

编程日记 2025/6/4 9:32:59

vw/vh

仿b站首页

准备工作

头部区域

视频区域

相关文章：