CSS学习笔记:vw、vh实现移动端适配

移动端适配

移动端即手机端,也称M端

移动端适配:同一套移动端页面在不同屏幕尺寸的手机上可以实现宽度和高度的自适应,也就是页面中元素的宽度和高度可以根据屏幕尺寸的变化等比缩放

之前我在一篇博客中介绍了rem实现移动端适配,详情见博客:CSS学习笔记:rem实现移动端适配的原理——媒体查询-CSDN博客

但现在,企业中最常用的实现移动端适配的方案是vw、vh,而不是rem 

vw、vh

可以将vw和vh通俗地理解成另一种形式的百分比,只不过这种百分比不是相对于父元素的尺寸,而是相对于视口,即10vw是视口宽度的10%,10vh是视口高度的10%

 

将设计稿的px单位转化为vw或vh单位

 

例如设计稿中某个元素的宽度时68px,设计稿的参考设备宽度是375px,那么元素宽度转化为vw为:N = 68 / 3.75 

思考:开发中,vw和vh会混用吗?

在实际开发中,vw和vh会混用吗?也就是会不会存在一种情况:一个盒子的宽用的是vw,高用的是vh?

答案是不会

因为不同屏幕尺寸的手机宽高比不一定相等,比如全面屏视口高度尺寸大,如果混用可能会导致盒子变形

救命,现在回想起来,在写这篇博客之前,我做的所有项目都是vw和vh混用……

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

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

相关文章

Django之文件上传(一)

一、环境搭建 建立项目 django-admin startproject project_demo配置数据库(以MySQL为例) # settings.py DATABASES = {default: {ENGINE: django.db.backends.mysql,NAME: django_file4,USER: root,PASSWORD: 123,HOST: 192.168.31.151,PORT: 3306,} }建立模型 class UploadF…

redis 集群 底层原理以及实操

前言 上篇我们讲解了哨兵集群是怎么回事 也说了对应的leader选举raft算法 也说了对应的slave节点是怎么被leader提拔的 主要是比较优先级 比较同步偏移量 比较runid等等 今天我们再说说,其实哨兵也有很多缺点 虽然在master挂了之后能很快帮我们选举出新的master 但是对于单个ma…

【Spring Cloud】分布式配置

目录 未来的开发场景为什么需要配置中心配置实时生效配置管理流程 开源配置中心基本介绍DisconfSpring Cloud ConfigApolloNacos Spring Cloud Config介绍配置管理工具体系 案例需求编写 Config Server1.创建配置文件2.创建项目3.添加依赖4.添加注解5.修改配置文件application.…

Python OCR 文字识别使用模型:读光-文字识别-行识别模型-中英-通用领域

介绍 什么是OCR? OCR是“Optical Character Recognition”的缩写,中文意为“光学字符识别”。它是一种技术,可以识别和转换打印在纸张或图像上的文字和字符为机器可处理的格式,如计算机文本文件。通过使用OCR技术,可…

在iPhone上恢复误删除的微信聊天记录

想知道是否可以恢复 微信iPhone 上误删除的消息?继续阅读以获取所有相关问题的答案。 过去几年,像微信这样的社交媒体应用为我们的生活增添了不少乐趣。它们让我们可以随时随地与朋友和家人保持联系。 微信是一个简化且热门的通信平台,它允…

数据结构 | 详解二叉树——堆与堆排序

🥝堆 堆总是一棵完全二叉树。 大堆:父节点总是大于子节点。 小堆:父节点总是小于子节点。 注意:1.同一个节点下的两个子节点并无要求先后顺序。 2.堆可以是无序的。 🍉堆的实现 🌴深度剖析 1.父节点和子…

QT截图程序,可多屏幕截图二,增加调整截图区域功能

上一篇QT截图程序,可多屏幕截图只是实现了最基本的截图功能,虽然能用但是缺点也有,没办法更改选中的区域,这在实际使用时不太方便。这篇增加了这个功能。先看看效果。 实现代码为: 头文件 #ifndef MASKWIDGET_H #de…

Matlab|基于PMU相量测量单元进行电力系统电压幅值和相角状态估计

主要内容 程序采用三种方法对14节点和30节点电力系统状态进行评估: ①PMU同步相量测量单元结合加权最小二乘法(WLS)分析电力系统的电压幅值和相角状态; ②并采用牛顿-拉夫逊方法进行系统潮流计算,结果作为理论分…

LLAMA3==shenzhi-wang/Llama3-8B-Chinese-Chat。windows安装不使用ollama

创建环境: conda create -n llama3_env python3.10 conda activate llama3_env conda install pytorch torchvision torchaudio cudatoolkit11.7 -c pytorch 安装Hugging Face的Transformers库: pip install transformers sentencepiece 下载模型 ht…

开源一个工厂常用的LIMS系统

Senaite是一款强大且可靠的基于Web的LIMS/LIS系统,采用Python编写,构建在Plone CMS基础架构之上。该系统处于积极开发阶段,在灵活的定制空间中为开发人员提供了丰富的功能。其中,Senaite在处理REST的JSON API上做得出色&#xff0…

【Linux】Socket中的心跳机制(心跳包)

Socket中的心跳机制(心跳包) 1. 什么是心跳机制?(心跳包) 在客户端和服务端长时间没有相互发送数据的情况下,我们需要一种机制来判断连接是否依然存在。直接发送任何数据包可以实现这一点,但为了效率和简洁,通常发送一个空包&am…

vs工程添加自定义宏

一、简介 用户可以添加自定义宏变量方便工程路径名称的修改和配置 例:$(SolutionDir) 为解决方案路径,$(PojectDir) 为工程所在路径 测试环境:vs2017,qt5.14.0 二、配置 1、打开属性窗口:视图-》其他窗口-》属性管…

蓝桥杯-AB路线(详细原创)

问题描述: 有一个由 N M 个方格组成的迷宫,每个方格写有一个字母 A 或者 B。小蓝站在迷宫左上角的方格,目标是走到右下角的方格。他每一步可以移动到上下左右相邻的方格去。 由于特殊的原因,小蓝的路线必须先走 K 个 A 格子、再…

Spring OAuth2:开发者的安全盾牌!(下)

上文我们教了大家如何像海盗一样寻找宝藏,一步步解锁令牌的奥秘,今天将把更加核心的技巧带给大家一起学习,共同进步! 文章目录 6. 客户端凭证与密码模式6.1 客户端凭证模式应用适用于后端服务间通信 6.2 密码模式考量直接传递用户…

【微机原理及接口技术】可编程计数器/定时器8253

【微机原理及接口技术】可编程计数器/定时器8253 文章目录 【微机原理及接口技术】可编程计数器/定时器8253前言一、8253的内部结构和引脚二、8253的工作方式三、8253的编程总结 前言 本篇文章就8253芯片展开,详细介绍8253的内部结构和引脚,8253的工作方…

人工智能初识

🌞欢迎来到人工智能基础的世界 🌈博客主页:卿云阁 💌欢迎关注🎉点赞👍收藏⭐️留言📝 🌟本文由卿云阁原创! 📆首发时间:🌹2024年5月1…

618手把手教你捡漏服务器

618最全捡漏攻略 捡漏规则1、新人优惠⭐⭐⭐2、教育优惠⭐⭐3、回馈活动⭐️ ECS价格对比新人优惠💝京东云 50/年百度云 60.69/年阿里云 82/年腾讯云 99/年 回馈活动🎁阿里云 教育优惠🏫阿里云腾讯云 hi,好久不见各位,…

16 -java反射

目录 第16章 反射 16.1 反射的概念 16.2反射的作用 16.3 java.lang.Class类 16.3.1 哪些类型可以获取Class对象 16.3.2 获取Class对象的四种方式 16.4 反射的基本应用 16.4.1 获取类型的详细信息 16.4.2 创建任意引用类型的对象 16.4.3 操作任意类型的属性 16.4.4 调…

【JS基础知识07】函数

一:函数是什么以及函数作用 1 函数是什么 函数是经过封装、调用后,能够完成特定任务的代码块 2 函数的作用 仅需“函数名(实参)”就可以调用函数,起到精简代码,提高开发效率的作用 二:函数使用 1 语法规则&#…

光耦的工作原理

一、光电耦合器简介 光电耦合器主要是一种围绕光作为媒介的光电转换元器件,能够实现光到电、电到光之间的自由转换。我们又可以称之为光电隔离器,之所以这么称呼,主要是因为光电耦合器能够很好的对电路中的电信号起到隔离的作用。有效的保护…