超过一半的网络流量来自移动设备。无法在手机上运行的网站会失去用户。本指南向您展示如何创建适应任何屏幕的响应式体验。
什么是响应式设计
定义
适应不同屏幕尺寸的设计。
原理
一个代码库，多个设备。
液体
流动和适应的布局。
为什么要响应式
移动流量
大多数访问都是移动的。
搜索引擎优化
谷歌优先考虑移动优先。
用户体验
统一的体验。
维护
一个版本，而不是多个。
移动优先
方法
首先针对移动设备进行设计，然后扩展到桌面设备。
为什么
移动设备的限制更严格。强制优先级。
CSS
最小宽度媒体查询。
CSS 技术
媒体查询
@media（最小宽度：768px）{}。
弹性盒
布局灵活，一维。
CSS 网格
二维布局。
流体字体
Clip() 用于缩放字体。
容器查询
基于容器，而不是视口。
##断点
常见
320 像素、480 像素、768 像素、1024 像素、1280 像素。
按内容
定义布局自然中断的位置。
不按设备
设备发生变化，内容断点最后出现。
响应式布局
流体网格
比例，而不是固定像素。
弹性盒
方向变化：行→列。
网格自动调整
调整的列。
堆栈移动
在移动设备上堆叠元素。
响应式排版
流体类型
字体大小：clamp(1rem, 2vw, 2rem)。
线长度
限制每行的字符数。
层次结构
保留所有尺寸。
响应式图像
源集
多个分辨率。
尺寸
不同视口中的尺寸。
图片
每个上下文都有不同的图像。
延迟加载
加载=“懒惰”。
艺术指导
移动设备的不同切口。
导航
###桌面
水平菜单，下拉菜单。
###手机
汉堡包，滑出。
###切换
JS 打开/关闭。
触摸目标
最小 44 像素。
##触摸与点击
触摸目标
手指更大。
悬停状态
不要依赖悬停。
手势
在适当的环境中滑动、捏合。
响应式表单
大输入
容易玩。
清除标签
始终可见。
键盘类型
类型=“电子邮件”，类型=“电话”。
自动填充
使其易于填写。
性能移动
重量
移动设备的字节数更少。
关键 CSS
首屏的内联 CSS。
JS 延迟
不要阻止渲染。
图片
合适的尺寸。
测试
浏览器开发工具
模拟设备。
真实设备
在真实手机上进行测试。
浏览器堆栈
云测试。
多方向
肖像和风景。
CSS 框架
###引导程序
强大的网格系统。
顺风
响应式实用程序类。
布尔玛
基于 Flexbox。
###自定义
它可以更轻。
常见错误
桌面优先
向下适应更困难。
固定宽度
不适应的布局。
跳过测试
不要在真实设备上进行测试。
文本不可读
字体非常小。
小触摸目标
很难点击。
工具
###Chrome 开发工具
设备模式。
响应式
多个屏幕同时显示。
聚苯板
开发者浏览器。
结论
响应式设计是一个基本要求。采用移动优先，使用现代 CSS 并在真实设备上进行测试。结果是网站适合所有人。
##常见问题解答
1) 移动优先是强制性的吗？ 推荐。使流程变得更容易，并优先考虑移动设备。
2) 使用多少个断点？ 3-5.基于内容，而不是特定设备。
3) Flexbox 还是网格？ 两者皆有。 Flexbox 适合一维，Grid 适合二维。
4) 框架还是自定义 CSS？ 对于小型项目，定制可能会更轻。
5) 如何在没有设备的情况下进行测试？ 开发工具、浏览器堆栈。但测试真实设备很重要。
另请阅读
- [GraphQL 应用程序：实施指南0
- 【网站与App的区别：完整选择指南1
- [渐进式网络应用程序：示例和成功案例2
- [可访问接口的设计：WCAG3 合规性
- [应用程序中的微交互：完整指南4
- 【移动性能优化：完整指南5