响应式设计基础

1. 前期准备

响应式提出：2010年；
三大技术成分：

• 流动网格
• 弹性图片
• 媒介查询

优点：

• 减少工作量
• 节省时间
• 搜索优化

缺点：

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

设计原则：

• 渐进增强 progressive enhancement

• 优雅降级 graceful degradation

• 先对最新版Chrome进行调试
  -是否屏幕大小不同显示不同内容

断点的选择：屏幕的大小

媒体查询：
操作符：and or not only

@media all and (min-width:800px) and (orientation landscape){
  ...
}

@media not all and (monochrome){...}
等价于
@media not (all and (monochrome)){...}

@media not screen and (color),print and (color){...}
等价于
@media not screen and (color) or print and (color){...}
等价于
@media (not (screen and (color))) , print and (color){...}

only：防止老旧的浏览器，不支持带媒体查询属性的查询而应用到给定的样式。

CSS3媒体属性简介：

• width：视口宽度
  -height:视口高度
• device-width:渲染表面的宽度，就是设备屏幕的宽度
• device-height:
• orientation：检查设备是处于横向还是纵向
• apect-ratio:基于视口宽高比width/height
• device-aspect-ratio:渲染表面的宽度，就是设备屏幕的宽度
  -color:每种颜色的位数bits 如：min-color:16位，8位
• resolution:检测屏幕或打印机的分辨率

以上属性都可以添加min- 或max- 前缀

viewport 视口：
移动端：

• 布局视口（layout viewport虚拟视口：原本宽度，缩放不改变；书的大小）
• 可视视口（visual viewport：不缩放是等于设备宽度，缩小后，容纳更大的布局视口，所以可视化视口变大，随着用户的操作变化；放大镜看到书的范围）
• 理想视口（ideal viewport）：布局视口在一个设备上的最佳尺寸，便于浏览器浏览 阅读

使用理想视口：

<meta name="viewport" content="width=device-width"/>
//布局视口成为理想视口

怎么样分析设计图

• 和设计师交流
• 网站如何交互
• 是否有相应的设计规范（字体 颜色 字号）
• 哪里必须100%还原，哪里地方可以灵活处理

2. 如何组织项目目录结构

• 约定优于配置
  文件夹：

doc#文档，如需求文档
src
   css
      main.css
      normalize.css
      login.css
   img
   sass
   404.html
   favicon.ico#logo 地址栏图标，比特虫
   robots.txt#爬虫，哪些文件可以被爬取
   humans.txt #作者等信息
   .gitignore
   README.md:项目简介、使用方式、相关链接
   CHANGLOG.md：版本号、更新内容、修复
   LICENSE.txt

   .edtorconfig#定义规则：如charset=utf-8
index_size=4
   js
      main.js
      vendor#存放第三方
          jquery.js
          jquery.min.js