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

CSS学习笔记14——移动端相关知识（rem,媒体查询,less）

news 来源：原创 2025/5/13 23:07:46

移动端

rem适配布局

rem单位

rem基准是相对于html元素的字体大小

父元素设定font-size，子元素根据rem缩放对应字体大小

媒体查询（Media Query）

@media可以针对不同屏幕尺寸设置不同样式
当你重置浏览器大小过程中，页面也会根据浏览器宽度和高度重新渲染页面

@media mediatype and|not|only (media feature) {CSS-Code;
}

mediatype媒体类型

值	解释说明
all	用于所有设备
print	用于打印机和打印浏览
scree	用于电脑屏幕，平板电脑，智能手机等

关键字 and not only 将多个媒体特性连接到一起作为媒体查询的条件

值	解释说明
and	“且”可以将多个媒体特性连接到一起
not	“非”排除某个媒体类型，可以省略
only	指定某个特定的媒体类型，可以省略

media feature媒体特性必须有小括号包含

值	解释说明
width	定义输出设备中可见区域的宽度
min-width	定义输出设备中页面最小可见区域的宽度
max-width	定义输出设备中页面最大可见区域的宽度

@media screen and (max-width:800px) {}
/*在屏幕上并且最大宽度是800像素 设置我们想要的样式*/

引入资源（使用两套`css`）

<link rel="stylesheet" media="mediatype and|not|only (media feature)" herf="mystylesheet.css"

Less基础

less变量

@变量名：值；

less编译

Easy less 插件把less文件编译为css文件

less嵌套

.header {width:200px;a {color:pink;&：hover {color:green;}}
}

如果遇见（交集|伪类|伪元素选择器）

内层选择器前面没有&符号，则它被解析为父选择器的后代
如果有&符号：被解析为父元素自身或父元素的伪类

less计算

运算符中间左右有个空格隔开
对于两个不同单位的值之间的运算，运算结果值取第一个值的单位
如果只有一个值有单位，运算结果取该单位

CSS学习笔记14——移动端相关知识（rem,媒体查询,less）

移动端 rem适配布局 rem单位 rem基准是相对于html元素的字体大小父元素设定font-size，子元素根据rem缩放对应字体大小媒体查询（Media Query） media可以针对不同屏幕尺寸设置不同样式当你重置浏览器大小过程中，页面也会根据…...

编程日记 2025/5/13 23:07:46

使用Node编写轻量级后端快速入门

使用Node编写轻量级后端快速入门 node 要作为轻量级后端需要下载一些对应模块可以参考下面命令。你可以借助 npm（Node Package Manager）来下载它们。模块下载 express：这是一个广受欢迎的 Node.js Web 应用框架，能用于构建 Web…...

编程日记 2025/5/13 22:36:50

海量数据存储与分析：HBase vs ClickHouse vs Doris 三大数据库优劣对比指南

1.引言在当今大数据时代，数据正以前所未有的速度持续增长。来自各个领域的数据，如互联网行业用户的每一次点击、浏览记录，金融机构的海量交易数据，以及物联网设备源源不断上传的实时监测数据等，其规模呈指数级攀升。…...

编程日记 2025/5/2 5:06:29

Redis 挂掉后高并发系统的应对策略：使用 Sentinel 实现限流降级与 SkyWalking 监控优化

前言在现代分布式系统中，Redis 被广泛用作缓存中间件以提升性能和减轻数据库压力。然而，在高并发场景下，一旦 Redis 出现故障（如宕机、网络中断等），如果没有有效的容错机制，可能会导致大量请求…...

编程日记 2025/5/13 22:06:50

C++11新特性_自动类型推导_decltype

decltype 是 C11 引入的一个关键字，用于在编译时推导表达式的类型。它提供了一种方式，让编译器根据表达式的类型来确定变量的类型，而不需要显式地指定类型。下面为你详细介绍 decltype 的使用方法和应用场景。基本语法 decltype 的基本语法…...

编程日记 2025/5/2 5:05:26

Scrapy爬虫实战总结：动态与登录爬取的精炼经验

引言在AI时代，信息和数据往往成就你的速度和高度。。。这篇文章基于前两篇的实践基础之上的一次小结，通过“爬取动态网页”和“登录网站”两场实战，我用Scrapy+Splash破译JavaScript，用FormRequest敲开权限大门。这篇总结凝练两场冒险的体验，淬炼Scrapy爬虫的通用经验…...

编程日记 2025/5/13 21:31:31

windows系统搭建自己的ftp服务器，保姆级教程(用户验证+无验证)

前言最近在搭建环境时，我发现每次都需要在网上下载依赖包和软件，这不仅耗时，而且有时还会遇到网络不稳定的问题，导致下载速度慢或者中断，实在不太方便。于是，我产生了搭建一个FTP服务器的想法。通过搭建FT…...

编程日记 2025/5/2 5:05:25

PDF本地化开源项目推荐

Stirling-PDF 项目详细总结 1. 项目概述 Stirling-PDF 是一个基于 Docker 的本地化 Web 应用，专注于 PDF 文件的多样化处理。其核心特点是： 完全本地化部署：所有文件处理均在用户设备或服务器内存中进行，任务完成后自动清理临…...

编程日记 2025/5/2 5:05:24

从工厂到生活：算法 × 深度学习，正在改写自动化的底层逻辑

一.背景： 从工业革命时期的机械自动化，到信息时代的智能自动化，人类对自动化技术的追求从未停歇。近年来，随着物联网、大数据、云计算等技术的蓬勃发展，自动化系统的复杂度与智能化程度显著提升。算法与深度学习的深度…...

编程日记 2025/5/13 21:27:25

如何拿奖蓝桥杯

要在蓝桥杯中拿奖，可参考以下方法： 备赛规划方面 - 明确目标与计划：选择自己感兴趣或有基础的组别，了解比赛大纲和历年真题，制定包含基础语法学习、算法入门、真题训练等阶段的合理学习计划。 - 合理安排时间&#xf…...

编程日记 2025/5/13 21:56:40

【STM32单片机】#12 SPI通信（软件读写）

主要参考学习资料： B站江协科技 STM32入门教程-2023版细致讲解中文字幕开发资料下载链接：https://pan.baidu.com/s/1h_UjuQKDX9IpP-U1Effbsw?pwddspb 单片机套装：STM32F103C8T6开发板单片机C6T6核心板实验板最小系统板套件科协目录 SPI…...

编程日记 2025/5/2 5:04:20

从请求到响应：初探spring web

引入： 首先小编想分享下一些开发小知识 2000年——手写servlet/JSP时代在这个阶段中，那时候写后端代码，可谓是个麻烦事。毕竟什么都要自己干发来的请求都要写extends HttpServlet的类，手动在web.xml配置 <servlet>…...

编程日记 2025/5/13 21:36:24

【中间件】bthread_基础_TaskControl

TaskControl 1 Definition2 Introduce**核心职责** 3 成员解析**3.1 数据结构与线程管理****3.2 任务调度与负载均衡****3.3 线程停放与唤醒（ParkingLot）****3.4 统计与监控** 4 **工作流程**5 **设计亮点**6 **使用场景示例**7 **总结**8 学习过程中的疑…...

编程日记 2025/5/2 5:04:18

1 systemd 1.1 配置文件 /etc/systemd/system /lib/systemd/system /run/systemd/system /usr/lib/systemd/user 1.2 commands systemctl list-unit-files | grep enable systemctl cat dlt-daemon.service systemctl cat dlt-system.service systemctl show dlt-daemon.ser…...

编程日记 2025/5/6 10:59:58

08 Python集合：数据 “去重神器” 和运算魔法

文章目录一、Python 中的集合概述1. 集合的特性二、集合的创建三、元素的遍历四、集合的运算1. 成员运算2. 二元运算3. 比较运算五、集合的方法六、不可变集合一、Python 中的集合概述在 Python 里，集合（Set）是一种无序且元素唯一的数据…...

编程日记 2025/5/1 21:32:09

配置和使用基本存储

配置和使用基本存储文章目录配置和使用基本存储[toc]一、什么是卷？二、卷的类型三、使用EmptyDir卷存储数据1.了解EmptyDir卷2.测试EmptyDir卷的使用四、使用HostPath卷挂载宿主机文件1.了解HostPath卷2.测试HostPath卷的使用五、使用NFS卷挂载NFS共享目录1.准备…...

编程日记 2025/5/13 21:36:32

win11 终端安装ffmpeg 使用终端Scoop

1、安装scoop (Windows 包管理器) Set-ExecutionPolicy RemoteSigned -Scope CurrentUser iwr -useb get.scoop.sh | iex 2、使用scoop来安装ffmpeg scoop install ffmpeg 3、测试一下ffmpeg，将Mp3文件转为Wav文件 ffmpeg -i A.mp3 A.wav 然后我们就看到A.wav生成…...

编程日记 2025/5/1 21:18:44

navicat中导出数据表结构并在word更改为三线表（适用于navicat导不出doc）

SELECTCOLUMN_NAME 列名,COLUMN_TYPE 数据类型,DATA_TYPE 字段类型,IS_NULLABLE 是否为空,COLUMN_DEFAULT 默认值,COLUMN_COMMENT 备注 FROMINFORMATION_SCHEMA.COLUMNS WHEREtable_schema db_animal（数据库名） AND table_name activity（…...

编程日记 2025/5/11 21:10:51

Azure Monitor 实战指南：全方位监控应用与基础设施

Azure Monitor 是 Azure 云原生的统一监控解决方案，能够实时追踪应用性能、基础设施健康状态及日志数据。本文将通过实战步骤演示如何利用 Azure Monitor 监控 GPT-4 服务、虚拟机、存储等资源，并结合自动化告警和日志分析，构建企业级监控体系。 1. Azure Monitor 核心功能…...

编程日记 2025/5/1 20:59:08

【人工智能】释放本地AI潜能：LM Studio用户脚本自动化DeepSeek的实战指南

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界随着大型语言模型（LLM）的快速发展，DeepSeek以其高效的性能和开源特性成为开发者关注的焦点。LM Studio作为一款强大的本地AI模型管理工具…...

编程日记 2025/5/5 4:42:40

智能体-CyberTask Orchestrator设计概要（V4.1超长版）

智能体-CyberTask Orchestrator设计概要（V4.0超长版） 一、深度演进背景与战略定位（核心篇幅拓展至2187字） （本段新增行业趋势与技术必要性论证） 1.1 全球网络安全威胁态势分析（2023-2025&…...

编程日记 2025/5/1 20:39:37

C# 面向对象实例演示

C# 面向对象编程实例演示一、基础概念回顾面向对象编程(OOP)的四大基本特性： 封装 - 将数据和操作数据的方法绑定在一起继承 - 创建新类时重用现有类的属性和方法多态 - 同一操作作用于不同对象产生不同结果抽象 - 简化复杂系…...

编程日记 2025/5/6 17:06:54

软件产品测试报告：如何全面评估及保障软件质量？

软件产品测试报告可以对软件产品质量做全面评估，还能够把评估结果展示出来，它依靠一系列测试手段和数据分析，能为产品的完善以及决策提供重要依据。下面从不同方面展开说明。测试目的开展本次软件产品测试，主要目的有三个。一…...

编程日记 2025/5/9 10:40:31

leetcode42-接雨水

leetcode 42 思路本题使用单调栈来计算每个位置能够接住的雨水量理解问题题目要求计算一系列柱子之间可以接住的雨水量。输入是一个数组，每个元素代表柱子的高度。输出是一个整数，表示能够接住的水量。找到边界条件什么情况下可以接住雨水…...

编程日记 2025/5/6 1:56:43

普通IT的股票交易成长史--20250430晚

声明：本文章的内容只是自己学习的总结，不构成投资建议。文中观点基本来自yt站Andylee，美股Alpha姐，综合自己的观点得出。感谢他们的无私分享。送给自己的话： 仓位就是生命，绝对不能满仓！&…...

编程日记 2025/5/1 20:24:00

Elastic Security 8.18 和 9.0 中的新功能

作者：来自 Elastic Mark Settle, Tamarian Del Conte, James Spiteri, Tinsae Erkailo, Charles Davison, Raquel Tabuyo, Kseniia Ignatovych, Paul Ewing, Smriti 检测规则的自动迁移、用于 ES|QL 的 Lookup Join、AI 功能增强，以及更多功能。 Elasti…...

编程日记 2025/5/1 20:21:57

使用 Vue 开发 VS Code 插件前端页面（上）

本文的方案主要参考了这篇博客： Vscode 的 extension webview 开发示例： Vue 和 React 实现 https://juejin.cn/post/7325132202970136585样例项目地址： github | vscode-webview-with-vuehttps://github.com/HiMeditator/vscode-webview-w…...

编程日记 2025/5/1 20:20:54

Vue Router路由原理

Vue Router 是 Vue.js 官方的路由管理器，它与 Vue.js 核心深度集成，使得构建单页应用（SPA）变得非常容易。Vue Router 的主要功能包括动态路由匹配、嵌套路由、编程式导航、命名路由、路由守卫等 Vue Router 原理单页应用&#x…...

编程日记 2025/5/1 20:17:49

Tauri v1 与 v2 配置对比

本文档对比 Tauri v1 和 v2 版本的配置结构和内容差异，帮助开发者了解版本变更并进行迁移。配置结构变化 v1 配置结构 {"package": { ... },"tauri": { "allowlist": { ... },"bundle": { ... },"security":…...

编程日记 2025/5/6 12:23:27

详解 MyBatis-Plus 框架中 QueryWrapper 类

QueryWrapper 一、 QueryWrapper 的概念为什么需要 QueryWrapper？ 二、 QueryWrapper 的基本使用1. 创建 QueryWrapper 实例2. 添加查询条件3. 执行查询三、 QueryWrapper 的常见方法1. 基本条件方法1.1 eq - 等于1.2 ne - 不等于1.3 gt - 大于1.4 ge - 大于等于1.…...

编程日记 2025/5/10 3:02:12

小米MiMo-7B大模型：解锁推理潜力的新传奇！

在大语言模型（LLMs）蓬勃发展的时代，推理能力成为衡量模型优劣的关键指标。今天为大家解读的这篇论文，介绍了小米的MiMo-7B模型，它通过独特的预训练和后训练优化，展现出强大的推理实力，快来一探究…...

编程日记 2025/5/1 19:59:10

联邦学习的收敛性分析(全设备参与，不同本地训练轮次)

联邦学习的收敛性分析在联邦学习中，我们的目标是分析全局模型的收敛性，考虑设备异构性（不同用户的本地训练轮次不同）和数据异质性（用户数据分布不均匀）。以下推导从全局模型更新开始，逐步引入假设并推导期望损失的递减关系，最终给出收敛性结论。 1. 全局模型更新与泰…...

编程日记 2025/5/1 19:21:25

硬件工程师面试常见问题（10）

第四十六问：锁存器，触发器，寄存器三者的区别触发器：能够存储一位二值信号的基本单元电路统称为 "触发器"。（单位） 锁存器：一位触发器只能传送或存储一位数据，而在实际工…...

编程日记 2025/5/1 19:16:11

1295. 统计位数为偶数的数字

题目解法一遍历数组挨个判断元素位数并统计（我的第一想法） class Solution { public:int findNumbers(vector<int>& nums) {int result 0;for(int n: nums){if(judge(n)) result;}return result;}bool judge(int a){int sum 1;a a / 10…...

编程日记 2025/5/1 19:15:06

3.1/Q1，Charls最新文章解读

文章题目：Social participation patterns and associations with subsequent cognitive function in older adults with cognitive impairment: a latent class analysis DOI：10.3389/fmed.2025.1493359 中文标题：认知障碍老年人的社会参与模…...

编程日记 2025/5/1 19:11:56

楼宇智能化四章【期末复习】

四、火灾自动报警系统结构组成：火灾探测器、区域报警器、集中报警器形式：1. 多线制系统 2.总线制系统 3.集中智能系统 4.分布智能系统 5.网络通信系统工作原理：以下是关于火灾自动报警系统及相关灭火系统的详细解答： 1. 火灾自动报警系统有哪几种形式？区…...

编程日记 2025/5/1 19:02:28

Splunk 使用Role 实现数据隔离

很多人知道 Splunk 有很多自带的Role, 今天我就要说说定制化的Role: 1: 在创建新role 的界面: 2: 在如下的界面，可以定制allow index name： 3：创建好新Role 后，在SAML 添加新的group 的时候，就可以看到Role 给某个group： 4：这样一个特定组的人来申请Splunk 权限，就可…...

编程日记 2025/5/1 19:00:19

Learning vtkjs之ImplicitBoolean

隐式函数布尔操作介绍 vtkImplicitBoolean 允许对隐式函数（如平面、球体、圆柱体和盒子）进行布尔组合。操作包括并集、交集和差集。可以指定多个隐式函数（所有函数都使用相同的操作进行组合）。支持的操作：‘UNION…...

编程日记 2025/5/1 18:56:06

LabelVision - yolo可视化标注工具

LabelVision是一款可视化图像标注工具,主要用于计算机视觉研究中的各种标注任务。支持多边形、矩形、圆形等多种标注方式，并且可以输出JSON、COCO等多种数据格式，方便与其他软件和框架进行集成和互操作。 ‌ 通过它可以很轻易的对图像进行标注,适合Y…...

编程日记 2025/5/1 18:48:45

系统分析师-第十五章

学习目标通过参加考试，训练学习能力，而非单纯以拿证为目的。 1.在复习过程中，训练快速阅读能力、掌握三遍读书法、运用番茄工作法。 2.从底层逻辑角度理解知识点，避免死记硬背。 3.通过考试验证学习效果。学习阶段快速阅读 …...

编程日记 2025/5/1 18:44:33

大连理工大学选修课——机器学习笔记（3）：KNN原理及应用

KNN原理及应用机器学习方法的分类基于概率统计的方法 K-近邻（KNN）贝叶斯模型最小均值距离最大熵模型条件随机场（CRF）隐马尔可夫模型（HMM） 基于判别式的方法决策树（DT）感知机…...

编程日记 2025/5/1 18:40:18

09 Python字典揭秘：数据的高效存储

文章目录一.字典是什么1.字典的特点二.字典的创建和使用三.字典的操作1.访问元素2.修改元素3.删除元素4.遍历字典5.成员运算四.字典方法1.获取字典中的指定元素2.获取字典中的元素3.字典合并4.删除元素一.字典是什么在 Python 中，字典（dict&#x…...

编程日记 2025/5/1 18:34:02

20250430在ubuntu14.04.6系统上完成编译NanoPi NEO开发板的FriendlyCore系统【严重不推荐，属于没苦硬吃】

【开始编译SDK之前需要更新源】 rootrootubuntu:~/friendlywrt-h3$ sudo apt update 【这两个目录你在ubuntu14.04.6系统上貌似git clone异常了】 Y:\friendlywrt-h3\out\wireguard Y:\friendlywrt-h3\kernel\exfat-nofuse 【需要单线程编译文件系统，原因不明】 Y:…...

编程日记 2025/5/1 18:24:42

第五部分：进阶项目实战

在前面的学习中，我们已经掌握了图像和视频的基础操作、增强滤波、特征提取以及一些基础的目标检测方法。现在，我们将综合运用这些知识来构建一些更复杂、更实用的应用项目。这一部分的项目将结合前面学到的技术，并介绍一些新的概念和工具&a…...

编程日记 2025/5/1 18:11:11

【Linux】记录一个有用PS1

PS1 是用来定义shell提示符的环境变量下面是一个带有颜色和丰富信息的 Linux PS1 配置示例，包含用户名、主机名、路径、时间、Git 分支和退出状态提示： # 添加到 ~/.bashrc 文件末尾 PS1\[\e[1;32m\]\u\[\e[m\] # 绿色粗体用户名 PS…...

编程日记 2025/5/11 23:20:34

【SpringBoot】基于mybatisPlus的博客管理系统（2）

目录 1.实现用户登录 Jwt令牌 1.引入依赖 2.生成令牌（token） Controller Service Mapper 2.实现强制登录定义拦截器： 配置拦截器： 1.实现用户登录在之前的项目登录中，我使用的是Session传递用户信息实现校验…...

编程日记 2025/5/1 18:07:01

免费在Colab运行Qwen3-0.6B——轻量高性能实战

Qwen一直在默默地接连推出新模型。每个模型都配备了如此强大的功能和高度量化的规模，让人无法忽视。继今年的QvQ、Qwen2.5-VL和Qwen2.5-Omni之后，Qwen团队现在发布了他们最新的模型系列——Qwen3。这次他们不是发布一个而是发布了八个不同的模型——参数范围从6亿到235…...

编程日记 2025/5/1 18:02:52