响应式网站是一个设计理念，它是多项技术的综合体
2010 年 Ethan Marcotte 发表了 Responsive web design 一文
响应式网站三要素
- flex image 流动图片
- flexble grid layout 流动网格
- media queries 媒体查询
响应式网站优点
- 减少工作量
- 网站、设计、代码、内容都只需要一份
- 多出来的工作量只是js脚本
- 节省时间
- 每个设备都得到正确的设计
- 搜索优化
响应式网站缺点
- 会加载更多的样式和脚本资源
- 设计比较难精确定位和控制
- 老版本浏览器兼容不好
国内外主流浏览器
查看浏览器占比，兼容性情况
媒体查询
- css2 就出现了
<link rel="stylesheet" href="site.css" media="screen"/>
<link rel="stylesheet" href="print.css" media="print"/>
- css3中进行了进一步增强，包含了更多的媒体类型和函数
@media all and (min-width:800px) and (orientation: landscaape){ ... } /* only 仅仅，只有 防止老旧的浏览器，不支持带媒体属性的查询，而应用到给定的样式 */- 主要的媒体属性：
- width：视口宽度
- height：视口高度
- device-width：渲染表面的宽度，就是设备屏幕的宽度
- device-height：渲染表面的高度，就是设备屏幕的高度
- orientation：检查设备处于横向还是纵向
- aspect-ratio：基于视口宽度和高度的宽高比。width/height，例如16/9,4/3
- device-aspect-ratio：渲染表面的宽度，就是设备屏幕的宽度
- color：每种颜色的位数bits 如min-color:16位，8位
- resolution：检测屏幕或者打印机的分辨率
- 主要的媒体属性：
viewport
- layout viewport 布局视口
- visual viewport 可视视口
- ideal viewport 理想视口
怎样分析设计图
- 和设计师，产品经理交流网站如何交互，需求如何体现
- 是否有相应的设计规范 字体，颜色，字号，间距等
- 什么地方必须100%还原，那些地方可以灵活处理
- 前端设计师，要有前端开发功底，前端开发，有一定的设计能力，便于前端设计与前端开发沟通
设计图案例
- 大屏幕 pc和平板用户
- 中屏幕 小平板、大屏手机用户
- 小屏幕 移动用户
响应式网站设计原则
为什么：兼容老的浏览器，让新的浏览器体验更好。移动终端，兼容性问题少一些
progressive enhancement 渐进增强
graceful degradation 优雅降级
优先小屏幕 or 大屏幕
根据用户群体和喜好进行选择
新的创业公司
- pc端：兼容最新chrome，firefox，ie
- 移动端：兼容苹果，安卓自带浏览器，QQ浏览器，uc浏览器即可
优先对最新版本chrome进行调试（调试简单，占比高）
断点的选择（宽度数值的选择）
- 不要针对某一特定设备去分类，下列做法不可取：
/*iPhone 4 and 4S*/
/*Portrait and Landscape*/
@media only screen
and (min-device-width:320px)
and (max-device-width:480px)
and (-webkit-min-device-pixel-ratio:2){
}
/*iPhone 5 and 5S*/
/*Portrait and Landscape*/
@media only screen
and (min-device-width:320px)
and (max-device-width:568px)
and (-webkit-min-device-pixel-ratio:2){
}
- 正确分类
- 0-480 小屏幕
- 481-800 中屏幕
- 801-1400 大屏幕
- 1400+ 巨屏幕
