移动端适配和响应式页面中的常用单位

在移动端适配和响应式页面中,一般采用以下几种单位:

  1. 百分比(%):百分比单位是相对于父元素的大小计算的。它可以用于设置宽度、高度、字体大小等属性,使得元素能够随着父元素的大小自动调整。百分比单位在响应式布局中非常有用,特别是在设置容器的宽度时。

  2. 视口单位(vw、vh、vmin、vmax):视口单位是相对于视口(viewport)大小计算的。视口单位有四种:

    • vw:相对于视口宽度的 1%。
    • vh:相对于视口高度的 1%。
    • vmin:相对于视口宽度和高度中较小值的 1%。
    • vmax:相对于视口宽度和高度中较大值的 1%。

    视口单位在移动端适配和响应式页面中非常实用,因为它们能够使元素随着视口大小自动调整。

  3. remrem 是 “root em” 的缩写,它是相对于根元素(<html>)的字体大小计算的。在移动端适配和响应式页面中,我们通常会在根元素上设置一个基准字体大小(例如 16px),然后使用 rem 单位来设置其他元素的字体大小、宽度、高度等属性。这样,当我们需要调整整个页面的大小时,只需修改根元素的字体大小即可。

  4. emem 是相对于当前元素的字体大小计算的。虽然 em 单位也可以用于移动端适配和响应式页面,但由于它是相对于当前元素的字体大小计算的,这可能导致嵌套元素的大小计算变得复杂。因此,在实际开发中,我们通常更倾向于使用 rem 单位。

在实际项目中,我们通常会根据不同的需求和场景,灵活地使用这些单位来实现移动端适配和响应式页面。

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

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

相关文章

基于JavaScript 如何实现爬山算法以及优化方案

前言 爬山算法&#xff08;Hill Climbing Algorithm&#xff09;是一种常见的启发式搜索算法&#xff0c;常用于解决优化问题。其核心思想是从一个初始状态出发&#xff0c;通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来&#xff0c;我们将通过 JavaScript 实现…

11. MySQL 备份、恢复

文章目录 【 1. MySQL 备份类型 】【 2. 备份数据库 mysqldump 】2.1 备份单个数据表2.2 备份多个数据库2.3 备份所有数据库2.4 备份文件解析 【 3. 恢复数据库 mysql 】【 4. 导出表数据 OUTFILE 】【 5. 恢复表数据 INFILE 】 问题背景 尽管采取了一些管理措施来保证数据库的…

在CentOS安装rabbitMQ教程

安装 1.官网地址 https://www.rabbitmq.com/download.html2.文件上传 上传到/usr/local/software目录下(如果没有software需要自己创建) 3.安装文件(分别按照以下顺序安装) cd /usr/local/rpm -ivh erlang-21.3-1.el7.x86_64.rpm yum install socat -y rpm -ivh rabbitmq-ser…

VM渗透系统合集(下载链接)

Windows渗透系统 制作不易&#xff0c;恳请师傅们点点关注一键三连&#xff0c;谢谢Ⅰ 目录 Windows渗透系统 1、win10渗透测试全套组件&#xff08;镜像&#xff09; 2、忍者渗透系统 3、悬剑单兵武器库 4、悬剑3.0公益版执法版本 5、ICS基于Win10打造的kali工具集【win版…

33-unittest数据驱动(ddt)

所谓数据驱动&#xff0c;是指利用不同的测试数据来测试相同的场景。为了提高代码的重用性&#xff0c;增加代码效率而采用一种代码编写的方法&#xff0c;叫数据驱动&#xff0c;也就是参数化。达到测试数据和测试业务相分离的效果。 比如登录这个功能&#xff0c;操…

MySQL物理备份

目录 备份策略 全量备份 (Full Backup) 增量备份 (Incremental Backup) 差异备份 (Differential Backup) 使用 Percona XtraBackup 全量备份 步骤 1&#xff1a;全量备份 步骤 2&#xff1a;备份后处理&#xff08;应用日志&#xff09; 步骤 3&#xff1a;恢复备份 验…

大模型基础——从零实现一个Transformer(2)

大模型基础——从零实现一个Transformer(1) 一、引言 上一章主要实现了一下Transformer里面的BPE算法和 Embedding模块定义 本章主要讲一下 Transformer里面的位置编码以及多头注意力 二、位置编码 2.1正弦位置编码(Sinusoidal Position Encoding) 其中&#xff1a; pos&…

持续总结中!2024年面试必问 20 道分布式、微服务面试题(七)

上一篇地址&#xff1a;持续总结中&#xff01;2024年面试必问 20 道分布式、微服务面试题&#xff08;六&#xff09;-CSDN博客 十三、请解释什么是服务网格&#xff08;Service Mesh&#xff09;&#xff1f; 服务网格&#xff08;Service Mesh&#xff09;是一种用于处理服…

线程知识点总结

Java线程是Java并发编程中的核心概念之一&#xff0c;它允许程序同时执行多个任务。以下是关于Java线程的一些关键知识点总结&#xff1a; 1. 线程的创建与启动 继承Thread类&#xff1a;创建一个新的类继承Thread类&#xff0c;并重写其run()方法。通过创建该类的实例并调用st…

TypeScript基础教程学习

菜鸟教程 TypeScript基础类型 数字类型 number 双精度 64 位浮点值。它可以用来表示整数和分数。 let binaryLiteral: number 0b1010; // 二进制 let octalLiteral: number 0o744; // 八进制 let decLiteral: number 6; // 十进制 let hexLiteral: number 0xf00d…

从信号灯到泊车位,ARMxy如何重塑城市交通智能化

城市智能交通系统的高效运行对于缓解交通拥堵、提高出行安全及优化城市管理至关重要。ARMxy工业计算机&#xff0c;作为这一领域内的技术先锋&#xff0c;正以其强大的性能和灵活性&#xff0c;悄然推动着交通管理的智能化升级。 智能信号控制的精细化管理 想象一下&#xff0…

【C语言】11.字符函数和字符串函数

文章目录 1.字符分类函数2.字符转换函数3.strlen的使用和模拟实现4.strcpy的使用和模拟实现5.strcat的使用和模拟实现6.strcmp的使用和模拟实现7.strncpy函数的使用8.strncat函数的使用9.strncmp函数的使用10.strstr的使用和模拟实现11.strtok函数的使用12.strerror函数的使用 …

视频修复工具,模糊视频变清晰!

老旧视频画面效果差&#xff0c;视频效果模糊。我们经常找不到一个好的工具来让视频更清晰&#xff0c;并把它变成高清画质。相信很多网友都会有这个需求&#xff0c;尤其是视频剪辑行业的网友&#xff0c;经常会遇到这个问题。今天给大家分享一个可以把模糊视频修复清晰的工具…

cnvd_2015_07557-redis未授权访问rce漏洞复现-vulfocus复现

1.复现环境与工具 环境是在vulfocus上面 工具&#xff1a;GitHub - vulhub/redis-rogue-getshell: redis 4.x/5.x master/slave getshell module 参考攻击使用方式与原理&#xff1a;https://vulhub.org/#/environments/redis/4-unacc/ 2.复现 需要一个外网的服务器做&…

《TCP/IP网络编程》(第十四章)多播与广播

当需要向多个用户发送多媒体信息时&#xff0c;如果使用TCP套接字&#xff0c;则需要维护与用户数量相等的套接字&#xff1b;如果使用之前学习的UDP&#xff0c;传输次数也需要和用户数量相同。 所以为了解决这些问题&#xff0c;可以采用多播和广播技术&#xff0c;这样只需要…

Python学习打卡:day02

day2 笔记来源于&#xff1a;黑马程序员python教程&#xff0c;8天python从入门到精通&#xff0c;学python看这套就够了 8、字符串的三种定义方式 字符串在Python中有多种定义形式 单引号定义法&#xff1a; name 黑马程序员双引号定义法&#xff1a; name "黑马程序…

网安面试题总结_1

#创作灵感# 助力网安人员顺利面试 等保测评 等保测评一般分成五个阶段&#xff0c;定级、备案、测评、整改、监督检查。 外网 外网打点的基本流程主要分为&#xff1a;靶标确认、信息收集、漏洞探测、漏洞利用、权限获取&#xff0c;其最终目的是为了获取靶标的系统权限/关…

Spring Boot中Excel的导入导出的实现之Apache POI框架使用教程

文章目录 前言一、Apache POI 是什么&#xff1f;二、使用 Apache POI 实现 Excel 的导入和导出① 导入 Excel1. 添加依赖2. 编写导入逻辑3. 在 Controller 中处理上传请求 ② 导出 Excel1. 添加依赖2. 编写导出逻辑3. 在 Controller 中处理导出请求 总结 前言 在 Spring Boot …

代码随想录算法训练营第四十四天 | 01背包问题理论基础、01背包问题滚动数组、416. 分割等和子集

背包问题其实有很多种&#xff0c;01背包是最基础也是最经典的&#xff0c;软工计科学生一定要掌握的。 01背包问题 代码随想录 视频讲解&#xff1a;带你学透0-1背包问题&#xff01;| 关于背包问题&#xff0c;你不清楚的地方&#xff0c;这里都讲了&#xff01;| 动态规划经…

C++11:列表初始化 初始化列表initializer_list decltype关键字

目录 前言 列表初始化 初始化列表initializer_list decltype关键字 左值和右值 move 前言 2003年C标准委员会曾经提交了一份技术勘误表&#xff08;简称TC1&#xff09;&#xff0c;使得C03这个名字取代了C98成为了C11前最新的C标准名称。不过由于C03主要是对C98标准中的…