响应式网站基础

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

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

响应式网站三要素

• flex image 流动图片
• flexble grid layout 流动网格
• media queries 媒体查询

响应式网站优点

• 减少工作量
  • 网站、设计、代码、内容都只需要一份
  • 多出来的工作量只是js脚本
• 节省时间
• 每个设备都得到正确的设计
• 搜索优化

响应式网站缺点

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

国内外主流浏览器

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

• can i use
• statecounter

媒体查询

• 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+ 巨屏幕