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

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

news 文章来源：https://blog.csdn.net/lalala8866/article/details/139581804 2024/11/7 15:26:11

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

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

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

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

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

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

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

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

相关文章：

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

在移动端适配和响应式页面中&#xff0c;一般采用以下几种单位&#xff1a; 百分比&#xff08;%&#xff09;&#xff1a;百分比单位是相对于父元素的大小计算的。它可以用于设置宽度、高度、字体大小等属性&#xff0c;使得元素能够随着父元素的大小自动调整。百分比单位在响…...

编程日记 2024/6/11 5:56:19

麒麟v10系统arm64架构openssh9.7p1的rpm包

制作openssh 说明 理论上制作的多个rpm在arm64架构&#xff08;aarch64&#xff09;都适用 系统信息&#xff1a;4.19.90-17.ky10.aarch64 GNU/Linux 升级前备份好文件/etc/ssh、/etc/pam.d等以及开启telnet 升级后确认正常后关闭telnet 在之前制作过openssh-9.5p1基础上继续…...

编程日记 2024/6/11 5:52:14

刚刚❗️德勤2025校招暑期实习测评笔试SHL测评题库已发（答案）

&#x1f4e3;德勤 2024暑期实习测评已发&#xff0c;正在申请的小伙伴看过来哦&#x1f440; ㊙️本次暑期实习优先考虑2025年本科及以上学历的毕业生&#xff0c;此次只有“审计及鉴定”“税务与商务咨询”两个部门开放了岗位~ ⚠️测评注意事项&#xff1a; &#x1f44…...

编程日记 2024/6/11 5:44:05

python对视频进行帧处理以及裁减部分区域

视频截取帧 废话不多说直接上代码&#xff1a; from cv2 import VideoCapture from cv2 import imwrite# 定义保存图片函数 # image:要保存的图片名字 # addr&#xff1b;图片地址与相片名字的前部分 # num: 相片&#xff0c;名字的后缀。int 类型 def save_image(image, add…...

编程日记 2024/6/11 5:43:04

Python栈的编程题目

你好&#xff0c;我是悦创。 下面是三道关于栈的编程题目&#xff0c;适合不同难度级别的练习&#xff1a; 1. 有效的括号&#xff08;简单&#xff09; 题目描述&#xff1a; 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[ 和 ] 的字符串&#xf…...

编程日记 2024/6/11 5:40:02

ROS云课三分钟外传之CoppeliaSim_Edu_V4_1_0_Ubuntu16_04

三分钟热度试一试吧&#xff0c;走过路过不要错过。 参考之前&#xff1a; 从云课五分钟到一分钟之v-rep_pro_edu_v3_6_2-CSDN博客 git clone https://gitcode.net/ZhangRelay/v-rep_pro_edu_v3_6_2_ubuntu16_04.gittar -xf v-rep_pro_edu_v3_6_2_ubuntu16_04/V-REP_PRO_EDU…...

编程日记 2024/6/11 5:37:59

day28回溯算法part04| 93.复原IP地址 78.子集 90.子集II

**93.复原IP地址 ** 本期本来是很有难度的&#xff0c;不过 大家做完 分割回文串 之后&#xff0c;本题就容易很多了 题目链接/文章讲解 | 视频讲解 class Solution { public:vector<string> result;// pointNum记录加入的点的数量&#xff0c;其等于3的时候停止void b…...

编程日记 2024/6/11 5:35:57

SpringBoot项目启动时“jar中没有主清单属性”异常

资料参考 Spring Boot 启动时 “jar中没有主清单属性” 异常 - spring 中文网 (springdoc.cn) 实际解决 更详细的参考以上&#xff0c;我这边的话只需要在 pom文件 中加上 spring-boot-maven-plugin 插件就能解决该异常&#xff0c;具体如下&#xff1a; <build><p…...

编程日记 2024/6/11 5:34:56

vAttention：用于在没有Paged Attention的情况下Serving LLM

文章目录 0x0. 前言&#xff08;太长不看版&#xff09;0x1. 摘要0x2. 介绍&背景0x3. 使用PagedAttention模型的问题0x3.1 需要重写注意力kernel0x3.2 在服务框架中增加冗余0x3.3 性能开销0x3.3.1 GPU上的运行时开销0x3.3.2 CPU上的运行时开销 0x4. 对LLM服务系统的洞察0x5…...

编程日记 2024/6/11 5:32:54

Python实现Stack

你好&#xff0c;我是悦创。 Python 中的栈结构是一种后进先出&#xff08;LIFO, Last In, First Out&#xff09;的数据结构&#xff0c;这意味着最后添加到栈中的元素将是第一个被移除的。栈通常用于解决涉及到反转、历史记录和撤销操作等问题。在 Python 中&#xff0c;你可…...

编程日记 2024/6/11 5:30:51

Helm在线部署Longhorn(1.6.0版本)分布式存储

环境依赖&#xff1a; k8s (版本大于等于v1.21版本)、helm工具 安装前准备 k8s worker 节点都需要执行 yum -y --setopttsflagsnoscripts install iscsi-initiator-utils echo "InitiatorName$(/sbin/iscsi-iname)" > /etc/iscsi/initiatorname.iscsi systemctl …...

编程日记 2024/6/11 5:27:49

算法题目学习汇总

1、二叉树前中后序遍历:https://blog.csdn.net/cm15835106905/article/details/124699173 2、输入一棵二叉搜索树&#xff0c;将该二叉搜索树转换成一个排序的双向链表。要求不能创建任何新的结点&#xff0c;只能调整树中结点指针的指向。 public class Solution {private Tr…...

编程日记 2024/6/11 5:26:48

DockerCompose中部署Jenkins（Docker Desktop在windows上数据卷映射）

场景 DockerJenkinsGiteeMaven项目配置jdk、maven、gitee等拉取代码并自动构建以及遇到的那些坑&#xff1a; DockerJenkinsGiteeMaven项目配置jdk、maven、gitee等拉取代码并自动构建以及遇到的那些坑_jenkins的安装以及集成jdkgitmaven 提示警告-CSDN博客 Windows10(家庭版…...

编程日记 2024/6/11 5:22:45

吊车报警的工作原理和使用场景_鼎跃安全

在现代建筑施工过程中&#xff0c;经常使用大型机械设备&#xff0c;如挖掘机、吊车、打桩机等&#xff0c;这些设备在施工过程中发挥着越来越重要的作用&#xff1b;同时&#xff0c;这些设备的作业频繁进行作业&#xff0c;对于接触到高压电线的风险也随之增加。大型机械设备…...

编程日记 2024/6/11 5:20:43

Spring5

文章目录 1. Spring 是什么&#xff1f;2. IoC3. Spring Demo4. IoC 创建对象的方式 / DI 方式注入的默认参数在哪里设定? 5. Spring 配置tx:annotation-driven 用于启用基于注解的事务管理 6. Bean的作用域7. 在Spring中有三种自动装配的方式1. 在xml中显式的配置2. 在java中…...

编程日记 2024/6/11 5:19:42

vue面试题二

一、请解释Vue中的双向数据绑定是什么&#xff1f; Vue中的双向数据绑定是一种机制&#xff0c;它使得数据的变化能够自动反映在用户界面上&#xff0c;同时用户界面中的输入也能够自动更新数据。这种机制实现了数据层&#xff08;Model&#xff09;和视图层&#xff08;View&…...

编程日记 2024/6/11 5:17:40

软件设计师笔记-程序语言基础知识

编程语言之间的翻译形式 编程语言之间的翻译形式主要有三种：汇编、解释和编译。这三种方式在将源代码转换为机器可执行的代码时，有着各自的特点和流程。 汇编： 定义：汇编是低级语言（如汇编语言）到机器语言的一种翻译方式。汇编语言是为特定计算机或计算机系列设计的一种…...

编程日记 2024/6/11 5:16:39

在Windows上安装VMWare Pro 16.2（虚拟机）并从零安装CentOS 7.6镜像过程记录

本文详细记录了在Windows的VMWare Workstation Pro 16.2中安装CentOS 7.6 的过程，非常适合新手从零开始一步步安装。 文章目录 一、安装VMWare Workstation Pro 16.2并激活二、安装CentOS 7.62.1 下载CentOS7.6镜像文件2.2 创建新的虚拟机2.3 安装CentOS镜像一、安装VMWare Wo…...

编程日记 2024/6/11 5:12:36

NGINX之location和rewrite

一.NGINX常用的正则表达式 二.Location location作用:对访问的路径做访问控制或者代理转发 1.location 常用的匹配规则&#xff1a; 进行普通字符精确匹配&#xff0c;也就是完全匹配^~ / 表示普通字符匹配。使用前缀匹配。如果匹配成功&#xff0c;则不再匹配其它 …...

编程日记 2024/6/11 5:11:35

Python数据框的合并（一） -- merge函数

目录 1 merge 函数详解 1.1 左连接&#xff08;Left Join&#xff09;: 1.2 右连接&#xff08;Right Join&#xff09;: 1.3 全连接&#xff08;Full Join 或 Outer Join&#xff09;: 2 代码示例 2.1 加载模块并创建示例数据框 2.2 左连接 2.3 右连接 2.4 全连接 1 m…...

编程日记 2024/6/11 5:10:34

【Qt秘籍】[010]-Qt常用控件

一、控件概述 在GUI&#xff08;图形用户界面&#xff09;开发领域&#xff0c;Qt无疑是众多开发者心中的首选框架之一。它不仅跨平台、功能强大&#xff0c;而且拥有丰富且灵活的控件库&#xff0c;使得开发者能够快速构建美观、高效的用户界面。对于初学者而言&#xff0…...

编程日记 2024/6/11 5:02:27

TypeScript基础教程学习

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

编程日记 2024/6/11 5:01:26

JavaSE面试

①.简述面向对象的三大特征 封装、继承、多态 1.封装&#xff1a; 概念&#xff1a; 是将类的某些信息隐藏在类的内部&#xff0c;不允许外部程序直接访问&#xff0c;而是通过该类提供的方法来实现对隐藏信息的操作和访问。 好处 &#xff1a; ①便于修改&#xff0c;增强了代…...

编程日记 2024/6/11 5:00:25

安全漏洞扫描工具

常用的安全漏洞扫描工具涵盖了网络扫描、Web应用扫描、系统漏洞检测等多个方面&#xff0c;以下是一些业界广泛认可和常用的工具&#xff1a; Nmap - 网络映射和安全审计工具&#xff0c;用于发现网络上的主机和服务&#xff0c;识别操作系统&#xff0c;枚举开放端口&#xff…...

编程日记 2024/6/11 4:57:20

前端开发部署：Visual Studio Code + vue

〇 说明 本教程全部采用默认安装路径&#xff0c;因为在进行自定义路径安装的时候&#xff0c;需要配置各种环境变量&#xff0c;在这个配置过程中&#xff0c;可能出现各种很混乱的问题。 一 安装Node.js 1 下载https://nodejs.org/en 2 按照默认NEXT执行 C:\Program Files…...

编程日记 2024/6/11 4:54:17

基于Sentry+OpenTelemetry实现微服务前后端全链路监控

文章目录 前⾔背景技术⽅案Sentry私有化部署部署环境准备 项目集成前端后端agent探针集成sentry sdk集成增强探针为⽇志注⼊TraceID异常处理SDK⾃定义开发sentry sdk⾃定义开发⾃定义SentryEvent注⼊otel追踪信息⾃定义全局异常上报issue事件新增动态过滤功能 Java Agent Exten…...

编程日记 2024/6/11 4:53:16

jquery.datetimepicker无法添加清除按钮的问题

项目场景&#xff1a; 自从决定用现有新技术实现CRM老项目起&#xff0c;就开始了我的折腾之路&#xff0c;最近一直在折腾前端页面&#xff0c;不像后端Java&#xff0c;写的有问题运行会报错&#xff0c;大多数报错一搜就能找到解决方案&#xff0c;前端这个倒好&#xff0c…...

编程日记 2024/6/11 4:52:14

Qt中解决编译中文乱码和编译失败的问题

解决方法 1.使用#pragma execution_character_set(“utf-8”) QT5中在cpp中使用#pragma execution_character_set(“utf-8”)解决中文乱码&#xff0c;不过这里要求该源代码必须保存成带Bom的utf-8格式&#xff0c;这也是有些在网上下载的代码&#xff0c;加上这句源代码后还…...

编程日记 2024/6/11 4:50:12

Android状态栏适配问题

Android状态栏适配是一个老生常谈的问题&#xff0c;那么我又拿出来讲了&#xff0c;因为这个东西确实太重要了&#xff0c;基本上每个项目都用得到。状态栏总共有几种形态。第一&#xff0c;让状态栏颜色跟应用主色调一致&#xff0c;布局内容不占有状态栏的位置。第二&#x…...

编程日记 2024/6/11 4:49:11

如何为色盲适配图形用户界面

首发日期 2024-05-25, 以下为原文内容: 答案很简单: 把彩色去掉, 测试. 色盲, 正式名称 色觉异常. 众所周知, 色盲分不清颜色. 如果用户界面设计的不合理, 比如不同项目只使用颜色区分, 而没有形状区分, 那么色盲使用起来就会非常难受, 甚至无法使用. 色盲中最严重的情况称为…...

编程日记 2024/6/11 4:46:07

学习php网站开发/2022年十大流行语

UNIX Shell 里面比较字符写法-eq 等于; -ne 不等于;-gt 大于; -lt 小于 ;-le 小于等于; -ge 大于等于;-z 空串; -n 非空串; 两个字符相等; ! 两个字符不等无论什么编程语言都离不开条件判…...

编程日记 2024/11/7 8:51:21

深圳网站建设黄浦网络-骗子/图片百度搜索

第二章 第二章我学习的线性表&#xff0c;听名字就很抽象&#xff0c;所以自然很难学。但是学完之后才发现&#xff0c;这真的很难学&#xff01;我们学习了顺序表和链表&#xff0c;从字面上就可以看出来&#xff0c;这两个表还是有区别的。这两种表都有各自的优缺点。 顺序表…...

编程日记 2024/11/7 3:04:18

wordpress评论美化/如何做好精准营销

windows10下升级node.js和降级Nodejs_cheerileeyoki的博客-CSDN博客_win10 升级nodejs...

编程日记 2024/11/6 22:28:59

学做婴儿衣服网站/专门代写平台

过硬的技术本领&#xff0c;可以给我们保驾护航&#xff0c;飞得更高。今天开始呢、我们就一起来探讨使用mybatis的好处。 首先我们一起来先看看原生的JDBC对于数据库的操作&#xff0c;然后总结其中的利弊&#xff0c;为学习mybatis奠定基础。 1、环境准备&#xff1a;统一使用…...

编程日记 2024/11/6 22:02:33

建站网站官方/网站建设规划书

frp中文文档&#xff1a;https://github.com/fatedier/frp/blob/v0.14.0/README_zh.md frp配置文件下载&#xff1a;https://github.com/fatedier/frp/releases/tag/v0.21.0 配置文件下载说明&#xff1a; linux服务器&#xff1a;frp_0.21.0_linux_amd64.tar.gz 树莓派&#x…...

编程日记 2024/11/6 21:33:25

廊坊智能模板建站/海南网站制作

D3.js力导向图(适用于其他类型图)中后添加元素遮盖已有元素的问题解决参考文章&#xff1a; &#xff08;1&#xff09;D3.js力导向图(适用于其他类型图)中后添加元素遮盖已有元素的问题解决 &#xff08;2&#xff09;https://www.cnblogs.com/lmou/p/10896801.html &#…...

编程日记 2024/11/6 21:24:15