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混用……

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

这样写代码太优雅了吧

文章目录 优化案例初次优化再次优化看看Spring源码的处理 优化案例 假设一个场景, 开发代码时,需要对类中的方法进行遍历,判断有没有注解NotNull,暂时没有合适的工具类,需要自己手搓一个。 无须多想,分分钟…

CSS学习笔记:响应式布局的原理——媒体查询

什么是响应式布局? 在实际书写代码时,我们不会自己去手写媒体查询来实现响应式布局,我们一般会调用现成的代码库或使用现成的框架(但这些代码库或框架的底层原理是媒体查询,所以了解媒体查询也是很有必要的&#xff0…

应用弹窗优先级

背景 由于活动业务越来越多,积累的弹窗越来越多和杂乱,出现如下弹窗交互问题: 弹窗无限重叠,影响操作 弹出顺序无优先级,重要弹窗被隐藏 原因相信大家都一样,产品是一次次迭代的,也可能是不…

ozon卖家精灵,ozon卖家怎么使用

在跨境电商的浪潮中,OZON作为俄罗斯领先的电商平台,吸引了众多卖家争相入驻。然而,面对日益激烈的市场竞争,如何提升店铺的运营效果,成为卖家们迫切需要解决的问题。而OZON卖家精灵作为一款专为OZON卖家打造的辅助工具…

Lua的几个特殊用法

:/.的区别 详细可以参考https://zhuanlan.zhihu.com/p/651619116。最重要的不同就是传递默认参数self。 通过.调用函数,传递self实例 通过 : 调用函数,传递self (不需要显示的传递self参数,默认就会传递,但…

ROS | C++和python实现发布结点和订阅结点

发布者结点: 代码实现: python: C: C和Python发布结点的差异: python: 发布结点pub 大管家rospy调用publisher函数发布话题 (话题,类型,话题长度) C: 先定义一个大管家:NodeHandle 然后大管家发布话题…

【C++】二维前缀和

1.题目 2.算法思路 和一维前缀和的方法类似&#xff0c;我们需要预处理一个求和矩阵&#xff0c;然后再求和。 下面是模板&#xff1a; 上面两张图片总结出来了两个公式&#xff0c;这是解决此类问题的关键。 3.代码 #include <iostream> using namespace std; #incl…

【车载开发系列】Vector工具链的安装

【车载开发系列】Vector工具链的安装 【车载开发系列】Vector工具链的安装 【车载开发系列】Vector工具链的安装一. VectorDriver二. DaVinci_Developer三. DaVinci Configurator 一. VectorDriver Vector Driver Setup是Vector产品链中重要的驱动软件,所有的硬件设备进行连接…

看看最新的B端登录界面,你是不是被潮流抛弃了?

毛玻璃风格&#xff08;Frosted Glass Style&#xff09;是新拟态设计风格中的一种分支&#xff0c;它灵感来源于现实世界中的毛玻璃材质。毛玻璃是一种通过在玻璃表面加工处理的方式&#xff0c;使其具有模糊、云翳和透明效果的特殊玻璃。 在设计中&#xff0c;毛玻璃风格通常…

PS:电子书App自动截图后合成一个PDF文档

说明&#xff1a;有的电子书App不能下载到本地&#xff0c;通过自动截图后合成一个PDF文档来解决&#xff01; 一、自动截图App 1.安装”免ROOT自动化助手“ 2.创建一个任务 3.编辑任务&#xff1a;根据电子书的操作顺序制定&#xff0c;400次就是书籍页数&#xff08;次数一…

备份服务器的安全风险以及如何通过TDE透明加密提升安全性

备份服务器的潜在安全风险主要包括以下几个方面&#xff1a; 1. 数据泄露风险&#xff1a; 备份数据可能包含敏感信息&#xff0c;如用户个人信息、商业机密等。如果备份数据未经适当保护&#xff0c;例如存储在不安全的位置或未加密&#xff0c;黑客或未授权的人员可能会获取…

React-基础样式控制

组件基础样式方案 React组件基础的样式控制有两种方式 1、行内样式&#xff08;不推荐&#xff09; 属性名是多个单词的需要使用驼峰写法 也可以把样式都提取到一个变量里&#xff0c;再赋值到style里 2、class类名控制 classnames优化类名控制 classnames是一个简单的JS库&…

【揭秘!在线ChatGPT神器,体验入口在此!】

&#x1f680;【揭秘&#xff01;在线ChatGPT神器&#xff0c;体验入口在此&#xff01;】&#x1f680; 前言 嘿&#xff0c;大家好&#xff01;今天我要和大家分享一些关于如何使用免费的ChatGPT的技巧。ChatGPT是一项令人兴奋的人工智能技术&#xff0c;它可以成为我们的好…

沃飞长空总部落地成都高新,为蓉低空经济发展助力!

5月25日&#xff0c;吉利科技集团与成都高新区签署合作协议&#xff0c;吉利科技集团旗下沃飞长空全球总部落地成都高新区。 根据协议&#xff0c;沃飞长空全球总部项目落地成都未来科技城&#xff0c;将布局总部办公、研发和生产制造低空出行航空器等业务。双方将积极发挥各自…

MySQL第六次作业

一、创建部门表 指令&#xff1a; mysql> CREATE TABLE dept (-> dept_id INT PRIMARY KEY AUTO_INCREMENT COMMENT 部门编号,-> dept_name CHAR(20) COMMENT 部门名称-> ); 演示&#xff1a; 二、插入部门数据 指令&#xff1a; mysql> INSERT INTO dept…

如何使用GPT-4o?如何使用 GPT-4o API?

如何使用GPT-4o&#xff1f; GPT-4o 也可以通过 ChatGPT 界面使用 如何使用 GPT-4o API 新的 GPT-4o 模型遵循 OpenAI 现有的聊天完成 API&#xff0c;使其向后兼容且易于使用。 ​ 如何升级GPT4Plus&#xff1f; 升级ChatGPTPLSU4需要一张虚拟卡&#xff0c;点击获取​​​…

vue项目集成萤石云在Web系统中实现实时摄像头监控及控制功能

需求 需求&#xff1a; 开发人员在产线上放置一个萤石摄像头&#xff0c;前端在可视化大屏上实时监控&#xff0c;且控制左右上下功能。 效果 萤石云接入web前期准备工作 阅读萤石云API文档&#xff1a;萤石云开放平台开发者文档 阅读萤石云控制API文档&#xff1a;萤石云摄…

企业电脑加密系统是如何发展的,今天最可靠的电脑加密系统是什么

企业电脑加密系统历经了几十年的发展&#xff0c;如今技术已经逐渐成熟&#xff0c;加密强度和防泄密效果越来越显著&#xff0c;那么它是怎么发展的&#xff0c;以及当今使用的加密技术是什么呢&#xff1f; 一、发展历程 1.早期探索阶段&#xff1a; 时间&#xff1a;上世纪…

SELINUX=enforcing时无法启动httpd服务的解决方案(semanage命令以及setroubleshoot-server插件的妙用)

一、问题描述&#xff1a; 当/etc/selinux/conf被要求必须是SELINUXenforcing&#xff0c;不被允许使用setenforce 0宽松模式 我们启动httpd就会报错&#xff1a; Job for httpd.service failed because the control process exited with error code. See "systemctl s…

在outlook的邮件中插入HTML;HTML模板获取;页面组态手动生成HTML

本文介绍如何在outlook发送邮件时&#xff0c;在邮件中插入HTML&#xff0c;此HTML可以从获取模板自行进行修改。 文章目录 一、下载HTML模板&#xff08;或自己制作好HTML文件&#xff09;二、outlook新增宏三、新建邮件&#xff0c;插入HTML四、通过图像化页面组态手动生成HT…