Day13:vw 和 vh 基本使用

目标:使用 vw 和 less 完成移动端的布局。


一、vw 适配方案

1、vw 和 vh 基本使用

vw 和 vh 是相对单位,相对视口尺寸计算结果。

  • vw:viewport width(1vw = 1/100视口宽度 )
  • vh:lviewport height ( 1vh = 1/100视口高度 )
<head><title>vw 和 vh 基本使用</title><style>* {margin: 0;padding: 0;}/* vw 和 vh 是相对视口宽高计算结果,可以直接实现移动端适配效果 *//* .box {width: 50vw;height: 30vw;background-color: pink;} */.box {width: 20vh;height: 50vh;background-color: green;}</style>
</head><body><div class="box"></div>
</body>
2、px 转换为 vw 和 vh

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

vh单位的尺寸 = px 单数数值 / ( 1/100 视口高度 )

以主流设计稿尺寸(375 * 667)为例子,则:

  • 1vw = xxx px / 3.75
  • 1vh = xxx px / 6.67

举一个简单的例子,帮助大家理解:

  1. index.html 代码
<head><title>px 转换为 vw 和 vh</title><link rel="stylesheet" href="./demo.css">
</head><body><div class="box1"></div><div class="box2"></div>
</body>
  1. less 代码
.box1 {width: (68 / 3.75vw);height: (29 / 3.75vw);background-color: pink;
}.box2 {width: (68 / 6.67vh);height: (29 / 6.67vh);background-color: green;
}// px单位尺寸 / 1/100视口的宽度或高度
  1. css 代码
.box1 {width: 18.13333333vw;height: 7.73333333vw;background-color: pink;
}.box2 {width: 10.19490255vh;height: 4.34782609vh;background-color: green;
}
3、vw 和 vh 混合使用的问题

vw 和 vh 不混合使用, 一般使用 vw 作为单位尺寸。

比如:375 * 667 的设计稿有一个 100 * 100 的正方形,如果混合使用 width: (100 / 3.75vw),height: (100 / 6.67vh),在 375 * 667 屏幕下是个正方形,如果换成其他像素的手机,就可能不再是正方形了。

所以我们在使用 vw 或 vh 布局时,只使用是一个单位,width: (100 / 3.75vw),height: (100 / 3.75vw)width: (100 / 6.67vh),height: (100 / 6.67vh),这样就能保证在所有屏幕上都是一个正方形。一般我们使用 vw 开发。


二、综合案例-酷我音乐

结合之前所学,使用 vw 完成如下移动端页面布局:

在这里插入图片描述

想要完整代码的,点击这里获取Day13综合案例完整代码。完全免费,仅供学习参考使用。



在这里插入图片描述

乾坤未定,你我皆是黑马


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/848286.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《C++避坑神器·二十六》结构体报重定义错误问题和std::variant同时存储不同类型的值使用方式

1、结构体重定义错误问题&#xff1a; struct person {int age; }p;p是一个已经创建好的对象&#xff0c;相当于struct person p; 如果放在头文件中容易被多个文件包含报重定义错误 typedef struct person {int age; }person;person就是struct person&#xff0c;这时候并没有…

Priority_queue

一、priority_queue的介绍和使用 1.1 priority_queue的介绍 1.优先队列是一种容器适配器&#xff0c;根据严格的弱排序标准&#xff0c;它的第一个元素总是它所包含的元素中最大的。 2.优先队列类似于堆&#xff0c; 在堆中可以随时插入元素&#xff0c; 并且只能检索最大堆…

深入了解JavaScript中的indexOf()方法:实现数组元素的搜索和索引获取

在JavaScript中&#xff0c;indexOf()方法用于搜索数组中的元素&#xff0c;并返回匹配的第一个元素的索引。如果数组中没有匹配的元素&#xff0c;则返回-1。 indexOf()方法的语法如下所示&#xff1a; array.indexOf(searchElement[, fromIndex]) 其中searchElement是要搜…

CMakeLists.txt和Package.xml

CMakeLists.txt和Package.xml CMakeLists.txt 总览 CMakeLists.txt 是用于定义如何构建 ROS (Robot Operating System) 包的 CMake 脚本文件。CMake 是一个跨平台的构建系统&#xff0c;用于自动化编译过程。在 ROS 中&#xff0c;CMakeLists.txt 文件指定了如何编译代码和链…

门面模式Api网关(SpringCloudGateway)

1. 前言 当前通过Eureka、Nacos解决了服务注册和服务发现问题&#xff0c;使用Spring Cloud LoadBalance解决了负载均衡的需求&#xff0c;同时借助OpenFeign实现了远程调用。然而&#xff0c;现有的微服务接口都直接对外暴露&#xff0c;容易被外部访问。为保障对外服务的安全…

分布式系统常用的三注解:@DS,@DistributeLock,@GlobalTransactional【开发实践】

文章目录 一、多数据源的动态切换&#xff1a;DS1.1 多数据源的背景1.1.1 主从复制1.1.2 读写分离1.1.3 分库分表 1.2 DS的使用流程1.2.1 添加依赖1.2.2 配置数据源1.2.3 使用 DS 切换数据源 1.3 使用DS切换数据源失效1.3.1 情形二&#xff1a;同类中的方法调用DS方法1.3.2 情形…

关于Golang中自定义包的简单使用-Go Mod

1. go env 查看 GO111MODULE 是否为 on&#xff0c;不是修改成on go env -w GO111MODULEon 2 .自定义包的目录格式 3. test.go 内容 package calc func Add(x, y int) int { // 首字母大写表示公有方法return x y }func Sub(x, y int) int {return x - y } 4.生成calc目…

CORSscannerburp的插件jsonp-hunterdnsub

1.CORSscanner 下载地址&#xff1a;CORScanner: Fast CORS misconfiguration vulnerabilities scanner 有时候会出一些警告没引入变量之类的&#xff0c;用pip安装一下就可以了 打开之后是这样的 2.jsonp-hunter 安装jython&#xff1a;Jython的安装和配置环境_jython安装…

前后端分离与实现 ajax 异步请求 和动态网页局部生成

前端 <!DOCTYPE html><!-- 来源 --> <!-- https://cloud.tencent.com/developer/article/1705089 --> <!-- https://geek-docs.com/ajax/ajax-questions/19_ajax_javascript_send_json_object_with_ajax.html --> <!-- 配合java后端可以监听 --&…

最新OpenAI免费API-openai api key获取方式

最近又开始准备LLM 应用开发&#xff0c;要用到api key&#xff0c;才发现过我之前免费发放的额度没了&#xff01;我都没咋用过&#xff0c;痛心&#x1f62d;&#x1f62d;&#x1f62d;&#xff01; 现在 OpenAI 有要求必须充值 5 刀才能使用&#xff0c;问就是没钱&#x…

Leetcode-438-找到字符串中所有的字母异位词

题目说明 给定一个字符串 s 和一个非空字符串 p&#xff0c;找到 s 中所有是 p 的字母异位词的子串&#xff0c;返回这些子串的起始索引。 字符串只包含小写英文字母&#xff0c;并且字符串 s 和 p 的长度都不超过 20100。 说明&#xff1a; 字母异位词指字母相同&#xff…

前端面试指南(一面)

知识点梳理 变量类型 ECMAScript 中定义了 6 种原始类型&#xff1a; 6种: Boolean String Number Null Undefinded Symbol 注意&#xff1a;原始类型不包含 Object。 typeof typeof xxx得到的值有以下几种类型&#xff1a;undefined boolean number string object function、…

除visio以外的几款好用流程图绘制工具

流程图绘制软件在嵌入式软件开发中扮演着重要的角色&#xff0c;它们能够帮助用户清晰、直观地展示工作流程。以下是几款流行的流程图绘制软件及其特点的详细报告&#xff1a; 思维导图MindMaster MindMaster作为一款专业的思维导图软件&#xff0c;不仅具备强大的思维导图制作…

硕士课程 可穿戴设备之作业一

作业一 第一个代码使用的方法是出自于[1]。 框架结构 如下图&#xff0c;不过根据对代码的解读&#xff0c;发现作者在代码中省去了对SSR部件的实现&#xff0c;下文再说。 Troika框架由三个关键部件组成&#xff1a;信号分解&#xff0c;SSR和光谱峰值跟踪。&#xff08;粗…

游戏缺失xinput1_3.dll怎么修复,总结几种有效的修复方法

在现代科技日新月异的时代&#xff0c;电脑已经成为我们生活和工作中不可或缺的工具。然而&#xff0c;由于各种原因&#xff0c;电脑可能会出现一些错误或问题&#xff0c;其中之一就是找不到xinput13.dll文件&#xff0c;这个问题会导致软件或者游戏无法正常启动运行&#xf…

面试 Redis 八股文十问十答第二期

面试 Redis 八股文十问十答第二期 作者&#xff1a;程序员小白条&#xff0c;个人博客 相信看了本文后&#xff0c;对你的面试是有一定帮助的&#xff01;关注专栏后就能收到持续更新&#xff01; ⭐点赞⭐收藏⭐不迷路&#xff01;⭐ 1&#xff09;redis 一般都用在什么场景…

搜维尔科技:使用Touch 触觉力反馈设备,用户可以完全沉浸在培训模拟、神经康复或远程的机器人操控中

使用Touch 触觉力反馈设备&#xff0c;用户可以完全沉浸在培训模拟、神经康复或远程的机器人操控中 搜维尔科技&#xff1a;使用Touch 触觉力反馈设备&#xff0c;用户可以完全沉浸在培训模拟、神经康复或远程的机器人操控中

文件编码概念

文件的读取 open()函数&#xff1a; 打开一个已存在的文件&#xff0c;或者创建一个新文件 open(name,mode,encoding) name:是要打开的目标文件名的字符串&#xff08;可以包含文件所在的具体路径&#xff09; mode:设置打开文件的模式&#xff08;访问模式&#xff09;&am…

C语言—字符函数和字符串函数

1.字符分类函数 C语言中有一系列的函数是专门做字符分类的&#xff0c;也就是一个字符是属于什么类型的字符的。 这些函数的使用都需要包含一个头文件 ctype.h。 例&#xff1a;将一句话中的小写字母改成大写字母。 2.字符转换函数 头文件&#xff1a;ctype.h C语言提供了2…

【数据集划分】假如你有超百万条oracle数据库数据(成真版)

【数据集划分】假如你有接近百万条oracle数据库数据&#xff08;成真版&#xff09; 写在最前面小结 数据集划分原因注意事项 1. 留出法&#xff08;Hold-out Method&#xff09;原理算法复杂度代码示例Scikit-learn的train_test_split分布式计算框架&#xff08;如Apache Spar…