响应式网站概念
弹性网格布局
弹性图片
媒体查询
响应式网站优点
减少工作量 节省时间
网站代码只需要一份
多出来的只是js脚本和css样式
每个设备都能得到正确的设计
搜索优化
响应式网站缺点
加在更多的样式和脚本
设计比较难精准的定位和控制
老版本浏览器兼容性不好
需要掌握技术
浏览器兼容
IE 火狐 谷歌 欧朋 360
媒体查询
width ：视口宽度
height：视口高度
device-width ：设备屏幕的宽度
device-height：设备屏幕的高度
orientation：检查设备处于横向还是纵向
aspect-ratio：基于视口宽度和高度的宽高比 如16/9 或4/3
color：每种颜色的位数 bits 如min-color：16位，8位
resolution：检测屏幕或打印机的分辨率如min-resolution：300dpi
以上属性都可以加min-或max-前缀
viewport视口
width ：视口宽度
device-width ：设备屏幕的宽度
桌面浏览器
只有一个视口就是浏览器显示内容的区域
手机浏览器
布局视口 虚拟宽度不变960以上
可视视口 不可设置修改，用户可以缩放
理想视口 布局视口在一个设备上的最佳尺寸
让网页自动适应电脑手机屏幕代码
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，如下：
| width | 设置layout viewport 的宽度，为一个正整数，或字符串"width-device" |
| initial-scale | 设置页面的初始缩放值，为一个数字，可以带小数 |
| minimum-scale | 允许用户的最小缩放值，为一个数字，可以带小数 |
| maximum-scale | 允许用户的最大缩放值，为一个数字，可以带小数 |
| height | 设置layout viewport 的高度，这个属性对我们并不重要，很少使用 |
| user-scalable | 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 |
网站开发前工作
和设计师产品经理沟通如何交互。是否有相应的设计规范，如字体颜色间距等
什么地方必须100%还原什么地方可以灵活处理。
分析设计图结构 大屏 （PC 平板 ） 中屏 （小平板 大屏手机）小屏幕 （移动手机） 不同屏幕设计图
哪些是可变的，哪些是不变的
哪些可以复用的
布局可以用哪些元素
响应式网站设计实践原则
渐进增强
优雅降级
看客户受众决定先设计大屏还是小屏
浏览器 可以先在一个浏览器测试兼容性如谷歌，在测试其他浏览器
断点的选择 例如
0-480px 小屏幕
481-800 中屏幕
801-1400 大屏幕
1400以上 超大屏幕
组织项目目录结构
约定优于配置 建立相应的文件夹结构
css js images index.html 404.html
编写HTML
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimun-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Document</title> </head> <body> <p>ie=edge表示强制以最新的IE浏览器模式渲染页面</p> </body> </html>