响应式网站基础

响应式网站是一个设计理念，它是多项技术的综合体

2010 年 Ethan Marcotte 发表了 Responsive web design 一文

响应式网站三要素

flex image 流动图片
flexble grid layout 流动网格
media queries 媒体查询
响应式网站优点
减少工作量
- 网站、设计、代码、内容都只需要一份
- 多出来的工作量只是js脚本
节省时间
每个设备都得到正确的设计
搜索优化

响应式网站缺点

会加载更多的样式和脚本资源
设计比较难精确定位和控制
老版本浏览器兼容不好

国内外主流浏览器

查看浏览器占比，兼容性情况

can i use
statecounter
媒体查询

css2 就出现了

1 2	<link rel="stylesheet" href="site.css" media="screen"/> <link rel="stylesheet" href="print.css" media="print"/>

css3中进行了进一步增强，包含了更多的媒体类型和函数
1
2
3
4
5
6
7
8
@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+ 巨屏幕

响应式网站三要素

响应式网站优点

响应式网站缺点

国内外主流浏览器

媒体查询

viewport

怎样分析设计图

设计图案例

响应式网站设计原则

优先小屏幕 or 大屏幕

新的创业公司

断点的选择（宽度数值的选择）