“个人网站”开发实战 第七课
响应式
讲师：翟路佳
| 教程二维码 | 本节课二维码 |
|---|---|
 |
 |
本节课程大纲
- 响应式设计简介
- 如何使用响应式
- 不同设备的分辨率
- 在 Chrome 下调试网页
响应式设计简介
响应式网页设计（英语：Responsive web design，通常缩写为RWD），或称自适应网页设计、回应式网页设计、对应式网页设计。 是一种网页设计的技术做法，该设计可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其他移动产品设备）上阅读和导航，同时减少缩放、平移和滚动。 --Wiki
简单来说，就是在桌面电脑上呈现一种样式，在手机上呈现另一种样式，在 iPad 上又呈现出别的样式。
响应式的优势
- 只需要一套 HTML + CSS
- 没有重定向，没有服务器端渲染 3.
响应式的劣势
- 增加开发量，增加学习成本
- 有些页面在不同设备上有完全不同的界面需求
- 资源不容易响应式，可能加重移动设备的加载负担
如何使用响应式
硬性要求：
1.
<head>
<meta name="viewport" content="initial-scale=1, minimum-scale=1, user-scalable=no">
</head>
2.
@media (max-width: 768px) {
}
- 多用百分比，少用绝对尺寸
- 使用 Bootstrap 等框架
常见设备分辨率
| 设备 | 分辨率 |
|---|---|
| iPhone 4 | 320x480 |
| iPhone 5 | 320x568 |
| iPhone 6 | 375x667 |
| iPhone 6 Plus | 414x736 |
| 常见 Android | 360x640 |
使用 Chrome 浏览器调试响应式
作业
- 在 Chrome 下调试响应式
- 使用真机（iPhone、Android 手机查看网站）