1. 前期準(zhǔn)備

響應(yīng)式提出：2010年；
三大技術(shù)成分：

• 流動(dòng)網(wǎng)格
• 彈性圖片
• 媒介查詢

優(yōu)點(diǎn)：

• 減少工作量
• 節(jié)省時(shí)間
• 搜索優(yōu)化

缺點(diǎn)：

• 會(huì)加載更多的樣式
• 設(shè)計(jì)比較難精確定位和控制
• 老版本瀏覽器兼容不好

設(shè)計(jì)原則：

• 漸進(jìn)增強(qiáng) progressive enhancement

• 優(yōu)雅降級(jí) graceful degradation

• 先對(duì)最新版Chrome進(jìn)行調(diào)試
  -是否屏幕大小不同顯示不同內(nèi)容

斷點(diǎn)的選擇：屏幕的大小

媒體查詢：
操作符：and or not only

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

@media not all and (monochrome){...}
等價(jià)于
@media not (all and (monochrome)){...}

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

only：防止老舊的瀏覽器，不支持帶媒體查詢屬性的查詢而應(yīng)用到給定的樣式。

CSS3媒體屬性簡(jiǎn)介：

• width：視口寬度
  -height:視口高度
• device-width:渲染表面的寬度，就是設(shè)備屏幕的寬度
• device-height:
• orientation：檢查設(shè)備是處于橫向還是縱向
• apect-ratio:基于視口寬高比width/height
• device-aspect-ratio:渲染表面的寬度，就是設(shè)備屏幕的寬度
  -color:每種顏色的位數(shù)bits 如：min-color:16位，8位
• resolution:檢測(cè)屏幕或打印機(jī)的分辨率

以上屬性都可以添加min- 或max- 前綴

viewport 視口：
移動(dòng)端：

• 布局視口（layout viewport虛擬視口：原本寬度，縮放不改變；書的大小）
• 可視視口（visual viewport：不縮放是等于設(shè)備寬度，縮小后，容納更大的布局視口，所以可視化視口變大，隨著用戶的操作變化；放大鏡看到書的范圍）
• 理想視口（ideal viewport）：布局視口在一個(gè)設(shè)備上的最佳尺寸，便于瀏覽器瀏覽 閱讀

使用理想視口：

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

怎么樣分析設(shè)計(jì)圖

• 和設(shè)計(jì)師交流
• 網(wǎng)站如何交互
• 是否有相應(yīng)的設(shè)計(jì)規(guī)范（字體 顏色 字號(hào)）
• 哪里必須100%還原，哪里地方可以靈活處理

2. 如何組織項(xiàng)目目錄結(jié)構(gòu)

• 約定優(yōu)于配置
  文件夾：

doc#文檔，如需求文檔
src
   css
      main.css
      normalize.css
      login.css
   img
   sass
   404.html
   favicon.ico#logo 地址欄圖標(biāo)，比特蟲
   robots.txt#爬蟲，哪些文件可以被爬取
   humans.txt #作者等信息
   .gitignore
   README.md:項(xiàng)目簡(jiǎn)介、使用方式、相關(guān)鏈接
   CHANGLOG.md：版本號(hào)、更新內(nèi)容、修復(fù)
   LICENSE.txt

   .edtorconfig#定義規(guī)則：如charset=utf-8
index_size=4
   js
      main.js
      vendor#存放第三方
          jquery.js
          jquery.min.js