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

使用vh和rem实现元素响应式布局

news 文章来源：https://blog.csdn.net/joeyjanela/article/details/141308691 2024/9/21 0:52:56

 示例代码

height: calc(100vh + 30rem)

vh（Viewport Height）：vh是一个相对单位，代表浏览器窗口高度的百分比，例如20vh就是浏览器窗口高度的20%。

rem（root em）：rem是通过html根元素动态计算大小的，例如根元素的字体大小是 16px，1rem就等于16px。

vh和rem都是相对单位，它们能够根据视口大小或根元素的字体大小动态调整元素的尺寸，从而实现响应式布局。这对于适应不同设备和屏幕尺寸至关重要。

相关文章：

使用vh和rem实现元素响应式布局

示例代码 height: calc(100vh 30rem) vh（Viewport Height）：vh是一个相对单位，代表浏览器窗口高度的百分比，例如20vh就是浏览器窗口高度的20%。 rem（root em）：rem是通过html根元素…...

编程日记 2024/8/19 5:30:06

螺旋矩阵 II（LeetCode）

题目 给你一个正整数 n &#xff0c;生成一个包含 1 到 n2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 解题 def generateMatrix(n):matrix [[0] * n for _ in range(n)]top, bottom 0, n - 1left, right 0, n - 1num 1while top <…...

编程日记 2024/8/19 5:29:04

如何快速掌握一款MCU

了解MCU特点 rom &#xff0c;ramgpiotimerpower 明确哪些资源是项目开发需要的 认真理解相关资料模块 开始编程 编写特别的验证程序&#xff08;项目不紧&#xff09;按照自己的理解编写&#xff08;老司机&#xff0c;时间紧张&#xff09; 掌握MCU基本功能 定时器 固…...

编程日记 2024/8/19 5:28:02

XSS-DOM

文章目录 源码SVG标签Dom-Clobbringtostring 源码 <script>const data decodeURIComponent(location.hash.substr(1));;const root document.createElement(div);root.innerHTML data;// 这里模拟了XSS过滤的过程&#xff0c;方法是移除所有属性&#xff0c;sanitize…...

编程日记 2024/8/19 5:25:58

uniapp去掉页面导航条

在pages.json文件中&#xff0c;globalStyle中添加 ”app-plus“:{"titleNView":false }...

编程日记 2024/8/19 5:23:55

MySQL数据库专栏（三）数据库服务维护操作

1、界面维护&#xff0c;打开服务窗口找到MySQL服务&#xff0c;右键单击可对服务进行启动、停止、重启等操作。 选择属性&#xff0c;还可以设置启动类型为自动、手动、禁用。 2、指令维护 卸载服务&#xff1a;sc delete [服务名称] 例如&#xff1a;sc delete MySQL 启动服…...

编程日记 2024/8/19 5:21:52

【QT】基于UDP/TCP/串口 的Ymodom通讯协议客户端

【QT】基于UDP/TCP/串口的Ymodom通讯协议客户端 前言Ymodom实现QT实现开源库的二次开发-1开源库的二次开发-2 串口方式实现TCP方式实现UDP方式实现补充&#xff1a;文件读取补充&#xff1a;QT 封装成EXE 前言 Qt 运行环境 Desktop_Qt_5_11_2_MSVC2015_64bit &#xff0c;基于…...

编程日记 2024/8/19 5:20:48

超详细！！！electron-vite-vue开发桌面应用之引入UI组件库element-plus（四）

云风网 云风笔记 云风知识库 一、安装element-plus以及图标库依赖 npm install element-plus --save npm install element-plus/icons-vue npm i -D unplugin-icons二、vite按需引入插件 npm install -D unplugin-vue-components unplugin-auto-importunplugin-vue-componen…...

编程日记 2024/8/19 5:19:45

【排序篇】实现快速排序的三种方法

&#x1f308;个人主页&#xff1a;Yui_ &#x1f308;Linux专栏&#xff1a;Linux &#x1f308;C语言笔记专栏&#xff1a;C语言笔记 &#x1f308;数据结构专栏&#xff1a;数据结构 文章目录 1 交换排序1.1 冒泡排序1.2 快速排序1.2.1 hoare版本1.2.2 挖坑法1.2.3 前后指针…...

编程日记 2024/8/19 5:18:43

Java 标识符（详解）

文章目录 一、简介二、命名规则三、命名规范 一、简介 在 Java 中&#xff0c;用于给变量、类、方法等命名的符号组合&#xff0c;我们称之为Java标识符&#xff0c;它就像是给这些编程元素贴上的独特标签&#xff0c;以便在程序中能够准确地引用和操作它们。 二、命名规则 标…...

编程日记 2024/8/19 5:17:42

2024年，有哪些优质的计算机书籍推荐？

在2024年&#xff0c;计算机领域的新书层出不穷&#xff0c;涵盖了从基础理论到前沿技术的多个方面。以下是今年出版的几本备受关注的计算机新书。 1. AI与机器学习类 1、深度学习详解 1.李宏毅老师亲笔推荐&#xff0c;杨小康、周明、叶杰平、邱锡鹏鼎力推荐! 2.数百万次播…...

编程日记 2024/8/19 5:12:35

Python基础知识点--总结

1. 注释 注释用于提高代码的可读性&#xff0c;在代码中添加说明文字&#xff0c;使代码更容易理解。 单行注释&#xff1a;使用 # 符号开头&#xff0c;注释内容在符号之后的行内。多行注释&#xff1a;使用三引号&#xff08; 或 """&#xff09;包裹注释内…...

编程日记 2024/8/19 5:09:31

高效记录与笔记整理的策略：工具选择、结构设计与复习方法

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…...

编程日记 2024/8/19 5:07:28

Request重复读的问题

换了新工作都有时间写文章&#xff0c;每天也是加班到很晚&#xff0c;也不是工作内容多&#xff0c;主要是还是效率低&#xff0c;要考虑多干的很心累。 一、关于request重复读的问题&#xff0c;从源码的角度来分析 为什么他不能重复读 跳转 再看源码前可能需要一些基础的…...

编程日记 2024/8/19 5:05:25

Linux学习第60天：Linux驱动开发的一些总结

今天是Linux驱动开发的最后一个章节&#xff0c;题目中标明是60天完成的&#xff0c;其实在实际学习及笔记的整理中不止是60天。中间有过断更&#xff0c;有时断更的时间还是挺长的。这是在整个Linux驱动开发学习中最不满意的地方。 题目为Linux学习&#xff0c;其实这个题目有…...

编程日记 2024/8/19 5:04:22

OPP || 继承和抽象类 || 访问控制

OPP面向对象程序设计 数据抽象&#xff1a;类的接口声明和定义实现分离继承&#xff1a;类构成的&#xff08;树型&#xff09;层次关系动态绑定&#xff1a;忽略相似类型区别&#xff0c;用统一的方式使用 基类派生类&#xff1a; 继承&#xff1a;类名 冒号 访问说明符 …...

编程日记 2024/8/19 5:00:15

蓝牙音视频远程控制协议(AVRCP) command跟response介绍

零.声明 本专栏文章我们会以连载的方式持续更新&#xff0c;本专栏计划更新内容如下&#xff1a; 第一篇:蓝牙综合介绍 &#xff0c;主要介绍蓝牙的一些概念&#xff0c;产生背景&#xff0c;发展轨迹&#xff0c;市面蓝牙介绍&#xff0c;以及蓝牙开发板介绍。 第二篇:Trans…...

编程日记 2024/8/19 4:58:10

MySQL的InnoDB存储引擎中的Buffer Pool机制

目录 Buffer Pool 简介 定义 为什么需要Buffer Pool 图解重点知识 Buffer Pool 的组成 数据页&#xff08;Data Pages&#xff09; 索引页&#xff08;Index Pages&#xff09; 插入缓冲页&#xff08;Insert Buffer Pages&#xff09; undo页&#xff08;Undo Pages&a…...

编程日记 2024/8/19 4:57:09

5. MongoDB 文档插入、更新、删除、查询

1. 插入文档 文档的数据结构和JSON基本一样。所有存储在集合中的数据都是BSON格式。 BSON是一种类似JSON的二进制形式的存储格式&#xff0c;是Binary JSON的简称。常用的插入文档方法包括&#xff1a; db.collection.insertOne()&#xff1a;插入单个文档db.collection.inse…...

编程日记 2024/8/19 4:56:06

⌈ 传知代码 ⌋ DETR[端到端目标检测]

&#x1f49b;前情提要&#x1f49b; 本文是传知代码平台中的相关前沿知识与技术的分享~ 接下来我们即将进入一个全新的空间&#xff0c;对技术有一个全新的视角~ 本文所涉及所有资源均在传知代码平台可获取 以下的内容一定会让你对AI 赋能时代有一个颠覆性的认识哦&#x…...

编程日记 2024/8/19 4:55:03

Oracle之触发器

简介 触发器在数据库里以独立的对象存储&#xff0c;他与存储过程不同的是&#xff0c;存储过程通过其他程序来启动运行或直接启动运行而触发器是由一个事件来启动运行&#xff0c;即触发器是当某个事件发生时自动式运行。并企&#xff0c;触发器不能接收参数。所以运行触发器…...

编程日记 2024/8/19 4:51:58

从零搭建微前端架构：解耦大型项目的终极方案

随着前端应用的复杂度不断提升，单体前端应用（Monolithic Frontend）的维护和扩展难度也日益增加。微前端（Micro-Frontend）作为一种新兴架构理念，旨在将大型前端项目拆分为多个独立、可独立部署的微应用，从而提升项目的可维护性和灵活性。这篇文章将带你从零开始搭建一个微…...

编程日记 2024/8/19 4:50:57

24/8/17算法笔记 MPC算法

MPC算法&#xff0c;在行动前推演一下 MPC&#xff08;Model Predictive Control&#xff0c;模型预测控制&#xff09;是一种先进的控制策略&#xff0c;它利用未来预测模型来优化当前的控制动作。MPC的核心思想是&#xff0c;在每一个控制步骤中&#xff0c;都基于当前系统状…...

编程日记 2024/8/19 4:49:55

GROUP_CONCAT 用法详解（Mysql）

GROUP_CONCAT GROUP_CONCAT 是 MySQL 中的一个聚合函数&#xff0c;用于将分组后的多行数据连接成一个单一的字符串。 通常用于将某个列的多个值合并到一个字符串中&#xff0c;以便更方便地显示或处理数据。 GROUP_CONCAT([DISTINCT] column_name[ORDER BY column_name [ASC…...

编程日记 2024/8/19 4:48:53

Golang httputil 包深度解析：HTTP请求与响应的操控艺术

标题&#xff1a;Golang httputil 包深度解析&#xff1a;HTTP请求与响应的操控艺术 引言 在Go语言的丰富标准库中&#xff0c;net/http/httputil包是一个强大的工具集&#xff0c;它提供了操作HTTP请求和响应的高级功能。从创建自定义的HTTP代理到调试HTTP流量&#xff0c;h…...

编程日记 2024/8/19 4:47:52

SQLALchemy 分页

SQLALchemy 分页 1. 使用SQLAlchemy的`slice`和`offset`/`limit`SQLAlchemy 1.4及更新版本SQLAlchemy 1.3及更早版本使用第三方库注意事项在Web开发中，分页是处理大量数据时一个非常重要的功能。SQLAlchemy是一个流行的Python SQL工具包和对象关系映射（ORM）库，它允许开发者…...

编程日记 2024/8/19 4:46:50

快速上手体验MyPerf4J监控springboot应用(docker版快速开始-本地版)

使用MyPerf4J监控springboot应用 快速启动influxdb时序数据库日志收集器telegrafgrafana可视化界面安装最终效果 项目地址 项目简介: 一个针对高并发、低延迟应用设计的高性能 Java 性能监控和统计工具。 价值 快速定位性能瓶颈快速定位故障原因 快速启动 监控本地应用 idea配…...

编程日记 2024/8/19 4:44:47

C语言 之 strlen、strcpy、strcat、strcmp字符串函数的使用和模拟实现

文章目录 strlen的使用和模拟实现函数的原型strlen模拟实现&#xff1a;方法1方法2方法3 strcpy的使用和模拟实现函数的原型strcpy的模拟实现&#xff1a; strcat的使用和模拟实现函数的原型strcat的模拟实现&#xff1a; strcmp的使用和模拟实现函数的原型strcmp的模拟实现 本…...

编程日记 2024/8/19 4:43:30

CAPL使用结构体的方式组装一条DoIP车辆识别请求报文（payload type 0x0002）

DoIP车辆识别请求（payload type 0x0002）报文的格式为： /******************************************************** +--------+--------+--------+--------+ |version | inVer | type | +--------+--------+--------+--------+ | length …...

编程日记 2024/8/19 4:39:10

数据接入教学

数据接入教学 1、开通外部网络策略2、检查本地防火墙策略3、测试网络连通性4、工具抓包命令5、本地测试发送与监听 1、开通外部网络策略 保证外部网络联通、保证内部防火墙开通策略&#xff08;可以关闭进行测试&#xff09; 2、检查本地防火墙策略 关闭进行测试 停止firewa…...

编程日记 2024/8/19 4:35:48

炒作将引发人工智能寒冬

我们似乎经常看到人工智能的进步被吹捧为机器真正变得智能的一大飞跃。我将在这里挑选其中的一个例子&#xff0c;并确切解释为什么这种态度会为人工智能的未来埋下隐患。 这很酷&#xff0c;这是一个非常困难且非常具体的问题&#xff0c;这个团队花了3 年时间才解决。他们一定…...

编程日记 2024/8/19 4:31:18

clamp靶机复现

靶机设置 设置靶机为NAT模式 靶机IP发现 nmap 192.168.112.0/24 靶机IP为192.168.112.143 目录扫描 dirsearch 192.168.112.143 访问浏览器 提示让我们扫描更多的目录 换个更大的字典&#xff0c;扫出来一个 /nt4stopc/ 目录 目录拼接 拼接 /nt4stopc/ 发现页面中有很多…...

编程日记 2024/8/19 4:27:08

mfc100u.dll丢失问题分析，详细讲解mfc100u.dll丢失解决方法

面对mfc100u.dll文件丢失带来的挑战时&#xff0c;许多用户都可能感到有些无助&#xff0c;尤其是当这一问题影响到他们日常使用的软件时。但实际上&#xff0c;存在几种有效方法可以帮助您快速恢复该关键的系统文件。为了方便不同水平的用户&#xff0c;本文将详细解析各种处理…...

编程日记 2024/8/19 4:26:00

【C++】什么是内存管理？

如果有不懂的地方&#xff0c;可以看我以往文章哦&#xff01; 个人主页&#xff1a;CSDN_小八哥向前冲 所属专栏&#xff1a;C入门 目录 C/C内存分布 C内存管理方式 new/delete操作内置类型 new/delete操作自定义类型 operator new与operator delete函数 new和delete实现…...

编程日记 2024/8/19 4:24:53

产业经济大脑建设方案（五）

为了提升产业经济的智能化水平&#xff0c;我们提出建设一个综合产业经济大脑系统&#xff0c;该系统通过整合大数据分析、人工智能和云计算技术&#xff0c;构建全方位的数据采集、处理和决策支持平台。该平台能够实时监测产业链各环节的数据&#xff0c;运用智能算法进行深度…...

编程日记 2024/8/19 4:23:43

如何在 Odoo 16 中覆盖创建、写入和取消链接方法

Odoo 是一款强大的开源业务应用程序套件&#xff0c;可为各种业务运营提供广泛的功能。其主要功能之一是能够自定义和扩展其功能以满足特定的业务需求。在本博客中&#xff0c;我们将探讨如何覆盖Odoo 16中的创建、写入和取消链接方法&#xff0c;从而使您无需修改​​核心代码…...

编程日记 2024/8/19 4:21:36

pip离线安装accelerate

一、离线下载到当前文件夹 pip download accelerate -d ./anzhuangbao# 制定版本使用以下命令pip download accelerate0.32.0 -d ./anzhuangbao二、离线安装 cd anzhuangbaipip install --no-index --find-links. accelerate三、验证是否安装 pip show accelerateAccelerate: …...

编程日记 2024/8/19 4:18:30

VUE3请求意外报跨越错误或者500错误问题

1.有可能是请求传参和传参类型写错了 首先要确保该请求接口是支持跨域的&#xff08;不支持叫后端改&#xff09; access-control-allow-headers:Content-Type, Accept, Access-Control-Allow-Origin, api_key, Authorization access-control-allow-methods:GET, POST, OPTIO…...

编程日记 2024/8/19 4:17:18

vue 关于两个if条件中的promise

一、案例效果 期望if判断条件里的两个promise 都同时执行完成 二、 初始代码案例 const formatDetail async (fnArgsJsonParams: MapLogicType) > {if (fnArgsJsonParams?.targetFeatureName) {const resDetailData await formatFeatureInfo(fnArgsJsonParams.targetF…...

编程日记 2024/8/19 4:16:14

C/C++移位运算问题

目录 上期答案揭晓&#xff1a; 回忆&#xff1a; 问题1展现&#xff1a; 问题2展现&#xff1a; 改进方案&#xff1a; 下期预告&#xff1a;C语言类型转换的问题。 上期答案揭晓&#xff1a; 上期的问题大家是否都有了想法&#xff0c;下面说说我的思路。 上次我们提到…...

编程日记 2024/8/19 4:12:54

录屏工具 Icecream Screen Recorder PRO v7.41

Icecream Screen Recorder的免费屏幕录制工具&#xff0c;具备捕捉视频、音频、图片和游戏等多种功能。以前推荐过的icecreamPDF也是他家的非常好用&#xff01; 下载链接&#xff1a;「录屏」来自UC网盘分享https://drive.uc.cn/s/b474616b91534...

编程日记 2024/8/19 4:11:52

解决连接不上Linux和服务器中的Nacos（Windows中能连接但是Linux中却不行）

报错 com.alibaba.nacos.shaded.io.grpc.StatusRuntimeException: UNKNOWN: Uncaught exception in the SynchronizationContext. Re-thrown. at com.alibaba.nacos.shaded.io.grpc.Status.asRuntimeException(Status.jav 2024-08-13T10:21:52.93708:00 ERROR 27764 --- …...

编程日记 2024/8/19 4:10:51

【LLM大语言模型-开篇】LLM入门实践指南

"LLM入门实践指南"是一个通过代码实践&#xff0c;为大模型入门读者提供全面且较为深入的大模型技术视角的教程。 为何关注LLM&#xff1f; 创新与变革&#xff1a;LLM不仅推动了自然语言处理&#xff08;NLP&#xff09;领域的进步&#xff0c;还在诸多行业中催生了…...

编程日记 2024/8/19 4:09:49

实时视频换脸、8 万家 AI 公司消失、论文天价售卖、新的 scaling law、爆火毒舌 AI | AI 掘金视界周刊第 5 期

AI 视界周刊由战场小包维护&#xff0c;每周一更新&#xff0c;包含热点聚焦、应用破局、学术前沿、社区热议、智见交锋、跨界 AI、企业动态和争议 AI 八大板块&#xff0c;后续板块划分和内容撰写在周刊迭代过程中持续优化&#xff0c;欢迎大家提出建议。 欢迎大家来到《AI 视…...

编程日记 2024/8/19 4:08:47

XSS靶场（1-11关）

目录 简述xss xss第1关 xss第2关 ​编辑 xss第3关 xss第4关 xss第5关过滤了 on script xss第6关 xss第7关 xss第8关 xss第9关 xss第10关 xss11关 我把源代码靶场放到了最顶端 简述xss XSS攻击通常指的是通过利用网页开发时留下的漏洞&#xff0c;通过巧妙的方法…...

编程日记 2024/8/19 4:07:43

vue2 子组件props接收父组件对象或数组必须使用函数进行返回

export default{ name:MyComponent, props:{ title:{ type:String, default:"" }, age:{ type:Number, default:1 }, names:{ type:Array, //数组或对象必须用函数进行返回 default:function(){ return [] …...

编程日记 2024/8/19 4:06:41

【算法/学习】双指针

✨ 少年要迎着朝阳&#xff0c;活得肆无忌惮 &#x1f30f; &#x1f4c3;个人主页&#xff1a;island1314 &#x1f525;个人专栏&#xff1a;算法学习 &#x1f680; 欢迎关注&#xff1a;&#x1f44d;点赞 &a…...

编程日记 2024/8/19 4:05:38

Springboot集成Liquibase笔记整理

添加依赖<dependency><groupId>org.liquibase</groupId><artifactId>liquibase-core</artifactId> </dependency>添加配置spring:liquibase:contexts: dev,testenabled: true编写liquibase配置类Configuration EnableConfigurationPropert…...

编程日记 2024/8/19 4:02:33

Python拆分无atlas图集（瑕疵版）

老板给了张没有atlas文件的图集让我拆图&#xff0c;简单写了一版凑合用。 存在的问题&#xff1a; 可能会拆出来一些小尺寸的透明像素图片&#xff1b;可能会拆出来一些偏大的小图的整体集合&#xff1b;可能会把应该是一块的小图批成两半&#xff0c;不过不多&#xff1b;其…...

编程日记 2024/8/19 4:00:29

SQLALchemy 排序

SQLALchemy 排序 基本用法多列排序使用函数或表达式进行排序注意事项在SQLAlchemy中，排序（Ordering）是通过order_by()方法实现的。这个方法允许你指定一个或多个列（或表达式），用于对查询结果进行排序。你可以指定升序（默认）或降序排序。 基本用法 假设你有一个User模…...

编程日记 2024/8/19 3:59:27