CSS rem、vw/vh、less

分辨率、视口与二倍图

一、分辨率与像素基础

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	生态更丰富，插件和框架更多
编译速度	较快	稍慢（功能更复杂）
适用场景	中小项目快速开发	大型复杂项目，需要高级特性