目录
分辨率、视口与二倍图
一、分辨率与像素基础
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:hover color: red; } } }
4. 运算（Operations）
数学运算：支持加减乘除。
单位处理：自动转换单位。
@base-margin: 10px; .box { margin: @base-margin * 2; // 20px width: 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 | 生态更丰富，插件和框架更多 |
| 编译速度 | 较快 | 稍慢（功能更复杂） |
| 适用场景 | 中小项目快速开发 | 大型复杂项目，需要高级特性 |