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

CSS rem、vw/vh、less

news 来源：原创 2025/7/22 7:51:24

分辨率、视口与二倍图

一、分辨率与像素基础

1. 物理像素（Physical Pixels）

2. 逻辑像素（CSS 像素）

二、视口（Viewport）控制

1. 视口类型

2. 设置理想视口

三、二倍图（Retina/HiDPI 图像）适配

1. 问题背景

2. 设计稿处理

3. CSS 适配二倍图

4. HTML 图片适配（srcset 属性）

4. 使用 image-set()（CSS 背景图）

rem 单位详解

一、基本概念

二、核心特性

1. 移动端适配（less）

2. 根元素依赖

3. 响应式适配

4. 预处理器支持

5. 用户友好性

vw 和 vh 单位详解

一、基本定义

二、核心特性

三、典型应用场景

1. 移动端适配（less）

2. 全屏布局

3. 响应式字体

四、注意事项与解决方案

1. 移动端 100vh 问题

2. 滚动条影响

3. 最小/最大值保护

五、不同单位对比

Less 详解

一、核心语法与功能

1. 变量（Variables）

2. 混合（Mixins）

3. 嵌套（Nesting）

4. 运算（Operations）

5. 函数（Functions）

6. 命名空间（Namespaces）

7. 导入（Import）

二、高级特性

1. 条件与循环

2. 作用域（Scope）

3. 映射（Maps）

三、实战应用场景

1. 主题切换

2. 响应式设计

3. 组件库开发

四、Less 与 Sass 对比

分辨率、视口与二倍图

一、分辨率与像素基础

1. 物理像素（Physical Pixels）

定义：设备屏幕的实际像素点数（如 iPhone 12 的 1170×2532 像素）。
特点：硬件固定，不可变。

2. 逻辑像素（CSS 像素）

定义：浏览器使用的抽象像素单位（如 width: 375px）。
与物理像素关系：由设备像素比（DPR）决定缩放比例。
- DPR（Device Pixel Ratio）：物理像素 / 逻辑像素（如 iPhone 的 DPR=2 或 3）。

二、视口（Viewport）控制

1. 视口类型

布局视口（Layout Viewport）：网页的实际渲染区域（默认较大，需缩放适配）。
视觉视口（Visual Viewport）：用户当前看到的屏幕区域。
理想视口（Ideal Viewport）：设备屏幕的逻辑像素宽度（如 iPhone 的 375px）。

2. 设置理想视口

通过 <meta> 标签控制布局视口等于设备宽度：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

参数说明：
- width=device-width：视口宽度等于设备逻辑宽度。
- initial-scale=1.0：初始缩放比例为 1（不缩放）。
- user-scalable=no：禁止用户手动缩放（可选）。

三、二倍图（Retina/HiDPI 图像）适配

1. 问题背景

高 DPR 设备（如 DPR=2）需要更高分辨率图像，否则图片会模糊失真。
解决方案：提供 2 倍大小的图片，通过 CSS 或 HTML 缩小显示。

2. 设计稿处理

二倍图设计：设计稿按 2 倍尺寸制作（如逻辑宽度 375px，设计稿宽度 750px）。
切图导出：切图时导出 2 倍图（如 icon@2x.png）。

3. CSS 适配二倍图

.logo {width: 100px;height: 100px;background-image: url("logo@2x.png"); /* 200x200 的图片 */background-size: 100px 100px; /* 缩小到 100x100 */
}

4. HTML 图片适配（`srcset` 属性）

<img src="logo.png" srcset="logo@2x.png 2x, logo@3x.png 3x" alt="Logo"
>

浏览器自动选择：根据设备 DPR 加载合适图片。

4. 使用 `image-set()`（CSS 背景图）

.logo {background-image: image-set(url("logo.png") 1x,url("logo@2x.png") 2x);
}

`rem` 单位详解

一、基本概念

rem（Root EM） 是 CSS 中的相对长度单位，其值始终 相对于根元素（<html>）的字体大小。

计算公式：1rem = 根元素<html>字体大小（默认 16px）。
与 em 的区别：em 相对于父元素字体大小，而 rem 仅相对于根元素，不受嵌套影响。

二、核心特性

1. 移动端适配（less）

@rootSize: 37.5;  /* 以 375px 设计稿为例 */.banner img {width: (240rem / @rootSize);
}

2. 根元素依赖

默认根元素字体大小为 16px（浏览器默认值）。

修改根元素字体大小会影响所有 rem 单位：

html {font-size: 62.5%; /* 1rem = 10px（16px × 62.5%） */
}

3. 响应式适配

通过调整根元素字体大小，实现全局缩放：

@media (max-width: 768px) {html {font-size: 50%; /* 1rem = 8px（适配小屏幕） */}
}

4. 预处理器支持

Sass/Less 函数：自动转换 px 到 rem：

@function rem($px) {@return ($px / 10) + rem; /* 假设根字体为 10px */
}
.box {width: rem(200); /* 输出 20rem */
}

5. 用户友好性

用户若调整浏览器默认字体大小，rem 单位会按比例缩放，而 px 固定不变，提升可访问性。

`vw` 和 `vh` 单位详解

vw（视口宽度单位）和 vh（视口高度单位）是 CSS 中基于浏览器视口尺寸的相对单位，常用于响应式布局和全屏设计。以下是它们的核心特性、使用场景及注意事项：

一、基本定义

1vw = 视口宽度的 1%
例如：视口宽度为 1200px，则 50vw = 600px。
1vh = 视口高度的 1%
例如：视口高度为 800px，则 30vh = 240px。

二、核心特性

特性	`vw`	`vh`
参考基准	视口宽度（包含滚动条宽度）	视口高度（不包含地址栏/工具栏）
动态响应	随视口宽度变化实时调整	随视口高度变化实时调整
兼容性	现代浏览器全支持（IE9+）	现代浏览器全支持（IE9+）

三、典型应用场景

1. 移动端适配（less）

@rs: 3.75;  /*以 375px 设计稿为例*/height: (44vw / @rs);

2. 全屏布局

全屏背景图/区块：

.hero-section {width: 100vw;    /* 宽度铺满视口 */height: 100vh;   /* 高度铺满视口 */background: url("bg.jpg") center/cover;
}

3. 响应式字体

字体随视口缩放：

h1 {font-size: clamp(2rem, 5vw, 4rem); /* 最小2rem，最大4rem，按视口宽度5%缩放 */
}

四、注意事项与解决方案

1. 移动端 `100vh` 问题

问题：移动浏览器地址栏/工具栏会占用视口高度，导致 100vh 超出实际可见区域。

解决方案：

CSS 新特性：使用 height: 100dvh（动态视口高度）。

JS 动态修正：

const setVH = () => {document.documentElement.style.setProperty('--vh', `${window.innerHeight}px`);
};
window.addEventListener('resize', setVH);
setVH();

.element {height: calc(var(--vh, 1vh) * 100);
}

2. 滚动条影响

问题：滚动条宽度可能占用视口宽度，导致 100vw 触发水平滚动条。

解决方案：

html {overflow-x: hidden; /* 隐藏水平溢出 */
}

3. 最小/最大值保护

防止过度缩放：结合 min()/max() 或 clamp() 限制范围。

.container {width: min(90vw, 1200px); /* 最大不超过1200px */font-size: clamp(1rem, 2vw, 1.5rem); /* 字体在1rem~1.5rem间变化 */
}

五、不同单位对比

单位	参考基准	特点	适用场景
`vw`/`vh`	视口宽/高	直接响应视口变化	全屏布局、动态缩放
`%`	父元素尺寸	依赖父容器，适合局部相对布局	嵌套布局、栅格系统
`rem`	根元素字体大小	全局稳定，适合响应式字体/间距	字体、组件尺寸
`em`	父元素字体大小	嵌套影响，适合局部相对尺寸	文本间距、图标对齐
`px`	固定像素	无视视口变化，精确控制	边框、小图标

Less 详解

Less（Leaner Style Sheets）是一种 CSS 预处理器，扩展了 CSS 语法，增加了变量、混合（Mixins）、嵌套、运算、函数等功能，使 CSS 更易维护和扩展。以下是 Less 的核心特性与用法详解：

一、核心语法与功能

1. 变量（Variables）

定义变量：使用 @ 符号。

使用变量：引用变量名。

@primary-color: #1e90ff;  // 定义变量
.button {background: @primary-color;  // 使用变量
}

2. 混合（Mixins）

定义混合：类似函数，可复用样式块。

调用混合：通过名称引用。

.border-radius(@radius: 5px) {  // 带默认参数的混合border-radius: @radius;
}
.card {.border-radius(10px);  // 调用混合
}

3. 嵌套（Nesting）

嵌套规则：子选择器嵌套在父级内部。

& 符号：引用父选择器。

.nav {padding: 1rem;li {display: inline-block;&:hover {  // 等同于 .nav li:hovercolor: red;}}
}

4. 运算（Operations）

数学运算：支持加减乘除。

单位处理：自动转换单位。

@base-margin: 10px;
.box {margin: @base-margin * 2;  // 20pxwidth: 100% / 3;          // 33.33333%
}

5. 函数（Functions）

内置函数：颜色处理、字符串操作等。

@color: #ff0000;
.darkened {background: darken(@color, 20%);  // 颜色变暗 20%
}

自定义函数：通过混合模拟函数。

.add(@a, @b) {@result: @a + @b;
}
.box {.add(10, 20);width: @result;  // 30px
}

6. 命名空间（Namespaces）

封装样式组：避免命名冲突。

#utils() {.center() {display: flex;justify-content: center;}
}
.container {#utils.center();  // 调用命名空间中的混合
}

7. 导入（Import）

模块化拆分：合并多个 Less 文件。

@import "variables.less";  // 导入变量文件
@import "mixins.less";     // 导入混合文件

二、高级特性

1. 条件与循环

条件语句：通过 when 实现逻辑判断。

.text-color(@color) when (lightness(@color) > 50% {color: black;
}
.text-color(@color) when (lightness(@color) <= 50% {color: white;
}

循环：通过递归混合实现。

.generate-columns(@n, @i: 1) when (@i <= @n) {.col-@{i} {width: (@i * 100% / @n);}.generate-columns(@n, (@i + 1));
}
.generate-columns(4);  // 生成 .col-1 到 .col-4

2. 作用域（Scope）

变量作用域：就近原则，局部变量覆盖全局。
```
@var: red;
.box {@var: blue;color: @var;  // blue
}
```

3. 映射（Maps）

键值对存储：通过命名空间模拟 Map。

#colors() {primary: #1e90ff;secondary: #ff6b6b;
}
.button {background: #colors[primary];
}

三、实战应用场景

1. 主题切换

// 定义主题变量
@theme-light: {background: white;color: black;
};
@theme-dark: {background: black;color: white;
};// 应用主题
.theme(@theme) {@theme();
}
body {.theme(@theme-dark);
}

2. 响应式设计

@breakpoint-mobile: 768px;
.respond-to(@device, @content) when (@device = mobile) {@media (max-width: @breakpoint-mobile) {@content();}
}.container {width: 100%;.respond-to(mobile, {width: 90%;margin: 0 auto;});
}

3. 组件库开发

// 定义按钮混合
.button(@bg-color, @text-color) {padding: 8px 16px;background: @bg-color;color: @text-color;&:hover {background: darken(@bg-color, 10%);}
}// 生成不同按钮
.btn-primary {.button(#1e90ff, white);
}
.btn-danger {.button(#ff6b6b, white);
}

四、Less 与 Sass 对比

特性	Less	Sass（SCSS）
语法	类似 CSS，兼容性强	支持缩进语法（Sass）和类 CSS 语法（SCSS）
功能	基础功能完善，学习曲线平缓	功能更强大（如条件、循环更灵活）
社区生态	较成熟，但活跃度低于 Sass	生态更丰富，插件和框架更多
编译速度	较快	稍慢（功能更复杂）
适用场景	中小项目快速开发	大型复杂项目，需要高级特性

CSS rem、vw/vh、less

目录分辨率、视口与二倍图一、分辨率与像素基础 1. 物理像素（Physical Pixels） 2. 逻辑像素（CSS 像素） 二、视口（Viewport）控制 1. 视口类型 2. 设置理想视口三、二倍图（Retina/HiD…...

编程日记 2025/7/22 7:51:24

CHI协议——retry

一、核心目标防止请求阻塞：当Completer暂时无法处理请求(比如tracker不够被占满)时，通过retry机制避免请求在 REQ Channel堆积，确保系统流畅运行。 retry机制只存在于REQ Channel，在DAT/RSP/SNP Channel不存在二、Retry Flow…...

编程日记 2025/7/22 7:48:45

在linux部署网站

在Linux部署网站，需要准备一个纯净的系统一、系统环境准备 1.设置静态IP地址 ‌ 2.关闭默认防火墙 systemctl disable firewalld --now ‌ 3.配置SSH密钥登录 4.yum update -y && reboot # 更新系统内核 5.yum install -y wget curl unzip # 安装…...

编程日记 2025/7/11 4:38:14

语义网是什么

语义网（Semantic Web）是由万维网发明者蒂姆伯纳斯-李（Tim Berners-Lee） 在20世纪90年代末提出的概念，目标是让互联网上的数据不仅对人类可读，还能被机器自动理解、关联和推理。它通过为数据添加明确的语义…...

编程日记 2025/7/20 13:34:15

51单片机

本文来源：腾讯元宝 51单片机是对所有兼容Intel 8031指令系统的8位单片机的统称，其技术起源于1981年Intel推出的8051内核微控制器(Micro Control Unit)。作为嵌入式系统领域的经典代表，它具有以下核心特点和应用价值： 一、技术特…...

编程日记 2025/7/16 1:45:28

初2数学-1.勾股定理

复习勾股定理： 1. ; 2. ; 3. ; 4. 后面3个式子都是根据相似三角形对应边成比例推出来的。第4个式子来做例子： 三角形CBD与三角形 ACD相似，所以： h:c2 c1 : h. 【例题] ABCD为菱形，边长为…...

编程日记 2025/7/17 16:03:57

Java条码与二维码生成技术详解

一、技术选型分析 1.1 条码生成方案 Barbecue是最成熟的Java条码库，支持： Code 128EAN-13/UPC-AUSPS Inteligent Mail等12种工业标准格式 1.2 二维码方案对比库名称维护状态复杂度功能扩展性ZXing★★★★☆较高强QRGen★★★☆☆简单一般BoofCV★…...

编程日记 2025/7/22 7:48:44

Spring Boot 集成 Quartz 实现定时任务（Cron 表达式示例）

Spring Boot 集成 Quartz 实现定时任务（Cron 表达式示例） 前言1. 添加 Quartz 依赖2. 创建 Quartz 任务3. 配置 Quartz 任务调度4. 启动 Spring Boot 观察定时任务执行5. Quartz Cron 表达式详解6. 结论前言在 Spring Boot 项目中，我们经常…...

编程日记 2025/7/21 11:25:30

数智读书笔记系列025《智能医疗：医学人工智能的未来》

一、书籍概述与核心价值 1.1 书籍定位与影响力《智能医疗：医学人工智能的未来》在智能医疗领域占据着独特且重要的位置，作为首部由德勤管理咨询引进的 AI 医疗译著，它宛如一座桥梁，连接了人工智能与生物医学这两个看似独立却又紧密关联的领域。在当下智能医疗蓬勃发展但…...

编程日记 2025/7/22 7:30:30

SQL Server 2022常见问题解答

以下是SQL Server 2022的常见问题解答，按主题分类整理：一、安装与升级 SQL Server 2022的系统要求是什么？支持的操作系统：Windows Server 2016及以上、Linux（Ubuntu 20.04/22.04, RHEL 8/9等）。内存：至少4GB（建议8GB+）。磁盘空间：6GB以上，具体取决于安装组件。如何…...

编程日记 2025/7/22 7:36:43

SQLAlchemy关键词搜索技术深度解析：从基础过滤到全文检索

在数据驱动的应用开发中，基于关键词的模糊查询是常见的业务需求。SQLAlchemy作为Python生态中最流行的ORM框架，提供了多种实现关键词搜索的技术方案。本文将从性能、适用场景和技术复杂度三个维度，系统对比分析SQLAlchemy中关键词搜索的最佳实…...

编程日记 2025/7/17 21:57:17

react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析

一、React 15（2016） 核心架构：Stack Reconciler（栈协调器） 工作原理： 同步递归渲染：采用深度优先遍历方式递归处理 Virtual DOM，形成不可中断的调用栈渲染流程：1. 触发 …...

编程日记 2025/7/9 18:41:31

[Windows] Edge浏览器_134.0.3124.83绿色便携增强版-集成官方Deepseek侧边栏

微软Edge浏览器绿色便携增强版长期更新链接：https://pan.xunlei.com/s/VOMA-aVC_GPJiv-MzRS89lsVA1?pwdemxj# Edge浏览器_134.0.3124.83绿色便携增强版-集成官方Deepseek侧边栏...

编程日记 2025/6/28 1:51:36

STM32学习笔记之存储器映射（原理篇）

📢：如果你也对机器人、人工智能感兴趣，看来我们志同道合✨ 📢：不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 📢：文章若有幸对你有帮助，可点赞 👍…...

编程日记 2025/7/16 7:20:11

探索PyMOL新插件NRGSuite-Qt：全面提升分子对接、结合位点预测与动力学模拟的研究效率

随着分子建模和计算生物学的快速发展，分子对接（Molecular Docking）、结合位点预测、相互作用分析以及动力学研究等领域的工具越来越重要。这些工具不仅帮助研究人员理解分子间的相互作用机制，还能加速药物设计和优化过程。NRGSuit…...

编程日记 2025/7/22 7:49:47

c#在work线程中怎样更新UI控件

最近笔者调试修改项目，碰到了c#在work线程中怎样更新UI控件中的场景，简单总结了下，主要有两个方法： 方法1：通过System.Windows.Application.Current.Dispatcher.Invoke来更新UI控件 System.Windows.Application.Curre…...

编程日记 2025/7/22 7:47:42

DeepSeek、Grok 与 ChatGPT 4.5：新一代大模型架构与推理能力深度解析

近年来，大语言模型（LLM）领域发展迅猛，DeepSeek、Grok 以及 OpenAI 最新发布的 ChatGPT 4.5 都是该领域的代表性产品。本文将从架构设计、推理能力、训练策略等方面，对三者进行技术对比，探讨其优势与潜在的应…...

编程日记 2025/7/22 7:45:31

从零基础到 Java 网站项目开发学习规划

在数字化时代，Java 凭借其卓越的跨平台性、强大的功能和丰富的类库，成为开发各类网站的主流编程语言。对于想要踏入 Java 网站开发领域的初学者而言，一份系统、科学的学习规划至关重要。它不仅能帮助我们有条不紊地掌握知识和技能&#xff0c…...

编程日记 2025/7/22 7:49:47

Unity Shader 学习17：合批渲染

一、基础概念合批主要是针对这三个概念进行优化减少： ① SetPass Call：一次渲染状态切换，也就是每次切换材质/Pass 时，就会触发一次SetPass Call ② Draw Call：cpu 调用一次 gpu 绘制函数 ③ Batch：表示…...

编程日记 2025/7/22 7:32:59

【JavaSE】抽象类和接口

【JavaSE】抽象类和接口前言：补充知识 —— 利用类和对象，交换两个数字一、抽象类1.1 抽象类是什么？1.2 抽象类特点1.3 抽象类举例1.4 抽象类作用二、接口2.1 接口是什么？2.2 接口的特性2.3 接口的使用规则2.4 类可以实现多个接…...

编程日记 2025/7/21 7:56:07

嵌入式单片机程序的映像文件解读

映像文件类型单片机下载程序的映像文件是包含了可执行代码、数据等信息，用于将程序烧录到单片机中的文件。常见的映像文件种类如下：十六进制文件（Hex 文件）格式特点：Hex 文件是一种文本格式的文件，以 ASCII 字符形式存储数据。它由一系列的记录组成，每条记录包含一个…...

编程日记 2025/7/13 17:07:48

在 Linux（Ubuntu / CentOS 7）上快速搭建我的世界 MineCraft 服务器，并实现远程联机，详细教程

Linux 部署 MineCraft 服务器详细教程（丐版，无需云服务器） 一、虚拟机 Ubuntu 部署二、下载 Minecraft 服务端三、安装 JRE 21四、安装 MCS manager 面板五、搭建服务器六、本地测试连接七、下载樱花，实现内网穿透，邀…...

编程日记 2025/7/22 7:43:40

STL之string

1.为什么学习string类 1.1 C语言中的字符串 C语言中，字符串是以’\0’结尾的一些字符的集合，为了操作方便，C标准库中提供了一些str系列的库函数， 但是这些库函数与字符串是分离开的，不太符合OOP的思想，而且…...

编程日记 2025/7/22 7:47:43

cJSON-轻量级 C 语言 JSON 解析库的使用（一）

文章目录 cJSON：轻量级 C 语言 JSON 解析库的使用前言一、cJSON 简介核心特点： 二、核心数据结构解析三、深入解析 API 设计1. 解析 JSON2. 访问数据3. 构建 JSON 四、内存管理策略五、高级应用技巧1. 引用系统2. 批量操作3. 原地修改六、性能优化技巧1…...

编程日记 2025/7/22 7:26:35

用Python和Stable Diffusion生成AI动画：从图像到视频的全流程指南

引言本文将演示如何通过Python代码实现基于文本提示的AI动画生成。我们将使用Stable Diffusion生成连贯图像帧，结合OpenCV合成视频，最终实现一个可自定义的动画生成 pipeline。一、环境准备 1. 依赖安装 # 安装核心库 pip install diffusers transformers torch numpy …...

编程日记 2025/7/22 7:36:42

C++ 继承：面向对象编程的核心概念（二）

文章目录 5. 继承与友元6. 继承与静态成员7. 多继承及其菱形继承问题7.1 不同的继承方式7.2 虚继承 8. 继承和组合9. 总结书接上回:C 继承：面向对象编程的核心概念（一） 5. 继承与友元友元关系不能继承，也就是说基类友元不能访问…...

编程日记 2025/7/22 7:41:21

Chaos Mesh 混沌工程平台介绍、安装及使用指南

Chaos Mesh 混沌工程平台介绍、安装及使用指南一、Chaos Mesh 简介 Chaos Mesh 是 PingCAP 开源的云原生混沌工程平台，支持在 Kubernetes 环境中模拟各种故障场景，帮助提升系统的容错性和可恢复性。核心特性丰富的故障类型： 资源类&…...

编程日记 2025/7/17 14:47:06

每天五分钟深度学习框架PyTorch:梯度裁剪解决RNN梯度爆炸的问题

本文重点在循环神经网络训练的过程中，有时候很容易出现梯度爆炸的情况，如果出现这种问题，我们应该怎么办？本文先来分析一下为什么会出现这种情况，然后我们在给出解决方案梯度爆炸的原因我们从RNN训练的反向传播算法入手，当我们使用BPTT算法训练RNN的时候，它的公式…...

编程日记 2025/7/16 8:50:21

批量删除 PDF 中的所有图片、所有二维码图片以及指定的某张图片

PDF 文档中我们可以插入图片、文字等多种类型的资源。在某些场景下，可能我们需要删除 PDF 文档中的图片，有可能是需要删除所有的图片，也有可能是删除固定的某些图片。那碰到这种情况，我们应该怎么处理呢？今天就给大家介…...

编程日记 2025/7/22 7:27:33

力扣HOT100之普通数组：53. 最大子数组和

这道题目我用贪心做的，感觉用贪心的思路比较简单，以后要是面试碰到这道题就直接用贪心好了，这道题用贪心的核心思想就是不断将数组元素i加入总和sum，如果sum比当前维护的最大值result更大，说明当前遍历到的i是正数&…...

编程日记 2025/7/22 7:23:38

【Qt】C++前向声明与Qt信号与槽的区别

相同点：二者都可以解决头文件相互包含的问题一、C 前向声明概念：前向声明是在代码里仅仅声明一个类、函数或者变量，而不给出其完整定义。例如class MyClass; 就是对 MyClass 类的前向声明。作用：主要是为了降低编译依赖&…...

编程日记 2025/7/22 7:23:38

SQL-木马植入、报错注入及其他

一、读写权限确认 show global variables like %secure%; 查看mysql全局变量的配置，当输入以上命令时，结果 secure_file_priv 空的时候，任意读写 secure_file_priv 某个路径的时候，只能在规定的那个路径下读写 secure_file_pri…...

编程日记 2025/7/22 7:25:30

基于 PHP 内置类及函数的免杀 WebShell

前言 PHP 作为广泛使用的服务端语言，其灵活的内置类（如 DOMDocument）和文件操作机制（.ini、.inc 的自动加载），为攻击者提供了天然的隐蔽通道。通过动态函数拼接、反射调用、加密混淆和伪命名空间等手法…...

编程日记 2025/7/15 10:37:13

主键id设计

主键自增id 🌱 1. 自增 ID（Auto Increment ID） ✅ 特点： • 数据库自带（MySQL, PostgreSQL 都支持） • 简单易用，可读性强 • 一般作为主键自带聚簇索引（主键就是物理存储顺序&…...

编程日记 2025/7/17 12:27:37

文件上传绕过的小点总结(6)

14.文件上传（文件包含漏洞）二次渲染很多服务器为了防止代码嵌入图片，通常会将上传的图片进行重新生成处理，包括文件格式转换等等，嵌入的恶意代码很容易被改掉。于是产生了二次渲染，二次渲染的原理就是找到…...

编程日记 2025/7/16 1:49:02

传统应用容器化迁移实践

背景介绍：从传统部署到容器化迁移的必要性在过去的运维工作中，某企业一直依赖于传统的物理机和虚拟机部署方式。然而，随着业务的快速发展和应用规模的不断扩大，传统部署方式的局限性逐渐显现： 资源利用率低&#xf…...

编程日记 2025/7/15 20:39:11

混境之地1

问题描述小蓝有一天误入了一个混境之地。好消息是：他误打误撞拿到了一张地图，并从中获取到以下信息： 混境之地的大小为 n⋅mn⋅m，其中 # 表示这个位置很危险，无法通行，. 表示道路，可以通行。他…...

编程日记 2025/7/16 23:57:37

LLM 加速技术有哪些

LLM 加速技术有哪些目录 LLM 加速技术有哪些量化（Quantization）基本原理举例剪枝（Pruning）基本原理举例动态Shape（Dynamic Shape）基本原理举例算子融合（Operator Fusion）基本原理举例量化（Quantization）基本原理量化是指将模型中连续取值（如32位浮点数）的参数…...

编程日记 2025/7/22 2:22:02

CPP从入门到入土之类和对象Ⅲ

拷贝构造函数拷贝构造函数是一个已经存在的对象去初始化一个新的对象时，调用的函数例如： 假设我有一个盒子，里面装了一个苹果拷贝构造函数的特点拷贝构造函数是构造函数的一个重载拷贝构造函数的第一个参数必须是类类型对象的引用,例如…...

编程日记 2025/7/17 11:54:41

安全上网沙箱：多方面解决政企私的上网问题

在数字化的浪潮中，网络已成为我们工作与生活不可或缺的一部分。然而，网络的便捷也伴随着诸多安全隐患，尤其是对于企业、个人以及政企机构而言，安全上外网成为了至关重要的课题。隔离保护：构建安全堡垒沙箱技术在内网…...

编程日记 2025/7/13 14:59:04

空转 | GetAssayData doesn‘t work for multiple layers in v5 assay.

问题分析当我分析多个样本的时候，而我的seurat又是v5时，通常就会出现这样的报错。错误的原因有两个： 一个是参数名有slot变成layer 一个是GetAssayData 不是自动合并多个layers，而是选择保留。那么如果我们想合并多个样本&…...

编程日记 2025/7/22 5:58:32

26、web前端开发之CSS3（三）

5. 文本（Text） CSS3大大增强了对文本样式和排版的控制，使得网页设计更加灵活和多样化。本讲详细介绍CSS3中常用的文本相关属性，包括文本对齐、字体大小、行高、字母间距、单词拆分、溢出隐藏等，帮助开发者更好地控制和…...

编程日记 2025/7/16 1:33:55

第 8 章:使用更好的库_《C++性能优化指南》_notes

使用更好的库第八章核心知识点解析编译与测试建议总结优化原则重点内容：第一部分：多选题（10题）第二部分：设计题答案与解析多选题答案：设计题答案示例（部分）： 测试用例设…...

编程日记 2025/7/17 15:47:37

【面试八股】：常见的锁策略

常见的锁策略 synchronized （标准库的锁不够你用了）锁策略和 Java 不强相关，其他语言涉及到锁，也有这样的锁策略。 1. 悲观锁，乐观锁（描述的加锁时遇到的场景） 悲观锁：预测接下来…...

编程日记 2025/7/17 1:11:29

Apache Iceberg 解析，一文了解Iceberg定义、应用及未来发展

什么是 Iceberg？ Apache Iceberg 是一种开源的表格式（Table Format） ，专为超大规模数据分析场景设计，通过标准化数据存储规范与访问协议，解决了传统数据湖在元数据管理、事务控制、查询性能等方面的核心痛…...

编程日记 2025/7/16 7:38:40

Ubuntu 优化启动时间优化

优化 Ubuntu 20.04 的启动时间可以从多个方面入手，以下是详细的步骤和建议： 一、分析启动耗时首先检查系统启动各阶段的耗时： systemd-analyze time # 查看整体启动时间 systemd-analyze blame # 列出各服务/进程的启动耗时 …...

编程日记 2025/7/18 10:36:13

【Git 常用指令速查表】

Git 常用指令速查表 Git 常用指令速查表目录1. 初始化仓库2. 提交代码流程3. 分支管理4. 远程仓库操作5. 撤销操作6. 查看状态与日志7. 其他实用指令完整操作示例常用场景速查表 Git 常用指令速查表目录初始化仓库提交代码流程分支管理远程仓库操作撤销操作查看状态与日志其…...

编程日记 2025/7/17 1:21:36

Linux实用操作及命令

一、各类小技巧（快捷键） 1、强制停止（ctrlc） Linux某些程序的运行，如果想要强制停止它，可以使用快捷键ctrl c 命令输入错误，也可以通过快捷键ctrl c，退出当前输入，重…...

编程日记 2025/7/20 5:03:38

Description 给定序列 a ( a 1 , a 2 , ⋯ , a n ) a(a_1,a_2,\cdots,a_n) a(a1,a2,⋯,an) 和 b ( b 1 , b 2 , ⋯ , b n ) b(b_1,b_2,\cdots,b_n) b(b1,b2,⋯,bn)，有 m m m 个操作分三种： add ⁡ ( l , r , k , t ) \operatorname{ad…...

编程日记 2025/7/16 5:10:52

在IDEA中使用TortoiseSVN

一、前言原版SVN由于下载路径中没有svn.exe文件，导致IDEA中无法使用命令行提交项目代码，因此，现在卸载旧版本TortoiseSVN，下载附有svn.exe的新版TortoiseSVN，下载使用过程记录如下二、下载过程卸载就在控制面板…...

编程日记 2025/7/20 16:48:00

分辨率、视口与二倍图

一、分辨率与像素基础

1. 物理像素（Physical Pixels）

2. 逻辑像素（CSS 像素）

二、视口（Viewport）控制

1. 视口类型

2. 设置理想视口

三、二倍图（Retina/HiDPI 图像）适配

1. 问题背景

2. 设计稿处理

3. CSS 适配二倍图

4. HTML 图片适配（srcset 属性）

4. 使用 image-set()（CSS 背景图）

rem 单位详解

一、基本概念

二、核心特性

1. 移动端适配（less）

2. 根元素依赖

3. 响应式适配

4. 预处理器支持

5. 用户友好性

vw 和 vh 单位详解

一、基本定义

二、核心特性

三、典型应用场景

1. 移动端适配（less）

2. 全屏布局

3. 响应式字体

四、注意事项与解决方案

1. 移动端 100vh 问题

2. 滚动条影响

3. 最小/最大值保护

五、不同单位对比

Less 详解

一、核心语法与功能

1. 变量（Variables）

2. 混合（Mixins）

3. 嵌套（Nesting）

4. 运算（Operations）

5. 函数（Functions）

6. 命名空间（Namespaces）

7. 导入（Import）

二、高级特性

1. 条件与循环

2. 作用域（Scope）

3. 映射（Maps）

三、实战应用场景

1. 主题切换

2. 响应式设计

3. 组件库开发

四、Less 与 Sass 对比

相关文章：

4. HTML 图片适配（`srcset` 属性）

4. 使用 `image-set()`（CSS 背景图）

`rem` 单位详解

`vw` 和 `vh` 单位详解

1. 移动端 `100vh` 问题