|
@@ -1,151 +0,0 @@
|
|
|
-# 响应式设计快速教程
|
|
|
|
|
-
|
|
|
|
|
-## 一、@media 媒体查询
|
|
|
|
|
-
|
|
|
|
|
-### 基本语法
|
|
|
|
|
-```css
|
|
|
|
|
-@media (条件) {
|
|
|
|
|
- /* 当条件满足时应用的样式 */
|
|
|
|
|
-}
|
|
|
|
|
-```
|
|
|
|
|
-
|
|
|
|
|
-### 常用断点(屏幕宽度)
|
|
|
|
|
-```css
|
|
|
|
|
-/* 移动端 */
|
|
|
|
|
-@media (max-width: 767px) { } /* 小于等于 767px */
|
|
|
|
|
-
|
|
|
|
|
-/* 平板 */
|
|
|
|
|
-@media (min-width: 768px) and (max-width: 1023px) { } /* 768px 到 1023px */
|
|
|
|
|
-
|
|
|
|
|
-/* 桌面 */
|
|
|
|
|
-@media (min-width: 1024px) { } /* 大于等于 1024px */
|
|
|
|
|
-```
|
|
|
|
|
-
|
|
|
|
|
-### 如何选择断点值?
|
|
|
|
|
-- **767px**:常见手机最大宽度
|
|
|
|
|
-- **768px**:常见平板最小宽度
|
|
|
|
|
-- **1024px**:常见桌面最小宽度
|
|
|
|
|
-
|
|
|
|
|
-**技巧**:打开浏览器开发者工具,调整窗口大小,观察你的设计在哪个宽度开始变形,那就是你的断点。
|
|
|
|
|
-
|
|
|
|
|
----
|
|
|
|
|
-
|
|
|
|
|
-## 二、clamp() 函数
|
|
|
|
|
-
|
|
|
|
|
-### 基本语法
|
|
|
|
|
-```css
|
|
|
|
|
-clamp(最小值, 理想值, 最大值)
|
|
|
|
|
-```
|
|
|
|
|
-
|
|
|
|
|
-### 工作原理
|
|
|
|
|
-浏览器会:
|
|
|
|
|
-1. 如果 `理想值` < `最小值` → 使用 `最小值`
|
|
|
|
|
-2. 如果 `理想值` > `最大值` → 使用 `最大值`
|
|
|
|
|
-3. 否则 → 使用 `理想值`
|
|
|
|
|
-
|
|
|
|
|
-### 如何计算数值?
|
|
|
|
|
-
|
|
|
|
|
-#### 示例 1:字体大小
|
|
|
|
|
-```css
|
|
|
|
|
-font-size: clamp(0.875rem, 1.5vw, 1rem);
|
|
|
|
|
-```
|
|
|
|
|
-- **最小值 0.875rem**:小屏幕时字体不会太小(约 14px)
|
|
|
|
|
-- **理想值 1.5vw**:随视口宽度变化(视口宽度 × 1.5%)
|
|
|
|
|
-- **最大值 1rem**:大屏幕时字体不会太大(约 16px)
|
|
|
|
|
-
|
|
|
|
|
-**计算思路**:
|
|
|
|
|
-- 先确定最小和最大值(固定值)
|
|
|
|
|
-- 中间用 `vw`(视口宽度百分比)让它在中间自适应
|
|
|
|
|
-
|
|
|
|
|
-#### 示例 2:内边距
|
|
|
|
|
-```css
|
|
|
|
|
-padding: clamp(0.5rem, 1.5vw, 1rem);
|
|
|
|
|
-```
|
|
|
|
|
-- **最小值 0.5rem**:小屏幕时内边距 8px
|
|
|
|
|
-- **理想值 1.5vw**:随屏幕宽度变化
|
|
|
|
|
-- **最大值 1rem**:大屏幕时内边距 16px
|
|
|
|
|
-
|
|
|
|
|
-#### 示例 3:宽度
|
|
|
|
|
-```css
|
|
|
|
|
-width: clamp(250px, 30%, 400px);
|
|
|
|
|
-```
|
|
|
|
|
-- **最小值 250px**:最小宽度 250px
|
|
|
|
|
-- **理想值 30%**:占父容器 30%
|
|
|
|
|
-- **最大值 400px**:最大宽度 400px
|
|
|
|
|
-
|
|
|
|
|
-### 快速计算法
|
|
|
|
|
-
|
|
|
|
|
-**步骤 1:确定最小值和最大值**
|
|
|
|
|
-- 打开浏览器,调整到最小窗口,看元素是否还能正常显示 → 这是最小值
|
|
|
|
|
-- 调整到最大窗口,看元素是否过大 → 这是最大值
|
|
|
|
|
-
|
|
|
|
|
-**步骤 2:确定中间值**
|
|
|
|
|
-- 使用 `vw`(视口宽度百分比)
|
|
|
|
|
-- 公式:`理想值 = (最大值 - 最小值) / 2` 对应的 vw
|
|
|
|
|
-- 或者直接用 `2vw`、`1.5vw` 等常见值测试
|
|
|
|
|
-
|
|
|
|
|
-**步骤 3:测试调整**
|
|
|
|
|
-- 在浏览器中调整窗口大小,观察效果
|
|
|
|
|
-- 如果小屏幕时太小 → 增大最小值
|
|
|
|
|
-- 如果大屏幕时太大 → 减小最大值
|
|
|
|
|
-- 如果中间过渡不自然 → 调整中间 vw 值
|
|
|
|
|
-
|
|
|
|
|
----
|
|
|
|
|
-
|
|
|
|
|
-## 三、实际应用示例
|
|
|
|
|
-
|
|
|
|
|
-### 完整示例
|
|
|
|
|
-```css
|
|
|
|
|
-.container {
|
|
|
|
|
- /* 容器内边距:小屏 12px,大屏 24px,中间自适应 */
|
|
|
|
|
- padding: clamp(0.75rem, 2vw, 1.5rem);
|
|
|
|
|
-
|
|
|
|
|
- /* 标题字体:小屏 16px,大屏 28px,中间自适应 */
|
|
|
|
|
- font-size: clamp(1rem, 2.5vw, 1.75rem);
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-/* 移动端特殊处理 */
|
|
|
|
|
-@media (max-width: 767px) {
|
|
|
|
|
- .container {
|
|
|
|
|
- padding: 1rem; /* 移动端固定值 */
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-```
|
|
|
|
|
-
|
|
|
|
|
-### 常用数值参考
|
|
|
|
|
-
|
|
|
|
|
-| 属性 | 最小值 | 中间值 | 最大值 | 说明 |
|
|
|
|
|
-|------|--------|--------|--------|------|
|
|
|
|
|
-| 字体 | `0.875rem` | `1.5vw` | `1rem` | 正文 |
|
|
|
|
|
-| 字体 | `1rem` | `2.5vw` | `1.8rem` | 标题 |
|
|
|
|
|
-| 内边距 | `0.5rem` | `1.5vw` | `1rem` | 小元素 |
|
|
|
|
|
-| 内边距 | `0.75rem` | `2vw` | `1.5rem` | 容器 |
|
|
|
|
|
-| 圆角 | `4px` | `1vw` | `8px` | 按钮 |
|
|
|
|
|
-| 间距 | `0.5rem` | `1.5vw` | `1rem` | gap/margin |
|
|
|
|
|
-
|
|
|
|
|
----
|
|
|
|
|
-
|
|
|
|
|
-## 四、调试技巧
|
|
|
|
|
-
|
|
|
|
|
-1. **打开浏览器开发者工具**(F12)
|
|
|
|
|
-2. **切换到响应式设计模式**(Ctrl+Shift+M)
|
|
|
|
|
-3. **调整窗口大小**,观察元素变化
|
|
|
|
|
-4. **修改 CSS 值**,实时查看效果
|
|
|
|
|
-5. **测试不同设备尺寸**(手机、平板、桌面)
|
|
|
|
|
-
|
|
|
|
|
----
|
|
|
|
|
-
|
|
|
|
|
-## 五、总结
|
|
|
|
|
-
|
|
|
|
|
-1. **@media**:用于不同屏幕尺寸的样式切换
|
|
|
|
|
- - `max-width`:小于等于某值
|
|
|
|
|
- - `min-width`:大于等于某值
|
|
|
|
|
-
|
|
|
|
|
-2. **clamp()**:让数值在最小和最大之间自适应
|
|
|
|
|
- - 格式:`clamp(最小, 理想, 最大)`
|
|
|
|
|
- - 理想值用 `vw` 实现自适应
|
|
|
|
|
-
|
|
|
|
|
-3. **工作流程**:
|
|
|
|
|
- - 先用 `clamp()` 实现基础自适应
|
|
|
|
|
- - 再用 `@media` 处理特殊情况(如移动端布局变化)
|
|
|
|
|
-
|
|
|