1 前期準(zhǔn)備

1.1 響應(yīng)式概念

響應(yīng)式網(wǎng)站是一個(gè)多項(xiàng)技術(shù)構(gòu)成的設(shè)計(jì)理念，實(shí)現(xiàn)利用一套代碼，實(shí)現(xiàn)網(wǎng)站對(duì)不同分辨率，不同尺寸，不同類(lèi)型的瀏覽終端自適應(yīng)適配，并且在不同類(lèi)型的終端上顯示不同風(fēng)格的設(shè)計(jì)。

1.2 響應(yīng)式技術(shù)構(gòu)成

• flexible grid layout 彈性網(wǎng)格布局
• flexible image 彈性圖片
• media queries 媒體查詢

1.3 響應(yīng)式網(wǎng)站的優(yōu)點(diǎn)

1. 減少工作量

• 網(wǎng)站、設(shè)計(jì)、代碼、內(nèi)容只需要一份
• 多出來(lái)的工作量只是JS腳本、CSS樣式做一些改動(dòng)

2. 節(jié)省時(shí)間
3. 每個(gè)設(shè)備都能得到正確的設(shè)計(jì)
4. 搜索優(yōu)化
5. 更好的用戶體驗(yàn)

1.4 響應(yīng)式網(wǎng)站的缺點(diǎn)

1. 會(huì)加載更多的樣式和腳本資源，影響加載速度
2. 設(shè)計(jì)比較難精確定位和控制
3. 老版本的瀏覽器兼容性不好

1.5 瀏覽器兼容

1. PC端國(guó)內(nèi)主流瀏覽器：

• Chrome瀏覽器
• IE瀏覽器 8+ / Edge瀏覽器
• Firefox瀏覽器
• Safari瀏覽器

2. 移動(dòng)端國(guó)內(nèi)主流瀏覽器：

• Android Browser
• Chrome瀏覽器
• UC瀏覽器
• 騰訊X5內(nèi)核瀏覽器（如微信、QQ、QQ空間、QQ瀏覽器）
• iOS Safari瀏覽器

1.6 媒體查詢

@media all and(min-width:800px) and (orientation:landscape){
    ......
    //@media申明類(lèi)型
    //all代表媒體類(lèi)型，可為print(打印)或者是screen（屏幕顯示）
    //and（邏輯操作符）
}

1. 邏輯操作符

• and：與，操作符左右都滿足為真
• or：或，操作符左右有一個(gè)滿足為真，可用逗號(hào)替代
• not：非，后跟的表達(dá)式，只對(duì)逗號(hào)或or以前的表達(dá)式有效，類(lèi)似于括號(hào)
  例如：@media (not(screen and(colod))),print and (color){}
• only：只有，防止老舊瀏覽器不兼容
  例如：@media = "only screen and（min-width:401px）and (max-width:600px)
等效于 @media = "only" //only后跟的所有樣式都會(huì)失效，都不會(huì)顯示
@media = "screen and（min-width:401px）and (max-width:600px)
等效于 @media = "screen" //screen后跟的所有邏輯操作符失效，都會(huì)顯示該媒體查詢內(nèi)的樣式

2. 媒體查詢屬性

可添加min后max來(lái)作為以下部分屬性的前綴

• width：視口寬度

• height：視口高度

• device-width：渲染表面的寬度，就是設(shè)備屏幕的寬度

• device-width：渲染表面的高度，就是設(shè)備屏幕的高度

• orientation：檢查設(shè)備處于橫向還是縱向

• aspect-ratio：基于視口寬度和高度的寬高比，width/height，如16:9,4:3

• //device-aspect-ratio：渲染表面的寬度，屏幕的寬度

• color：每種顏色的位數(shù)bits，如min-color:16位,8位

• resolution：檢測(cè)屏幕或打印機(jī)的分辨率，如min-resolution：300dpi

1.7 viewport視口

1.布局視口（layout viewport）

布局視口為網(wǎng)頁(yè)P(yáng)C端版式，為默認(rèn)布局模式下的頁(yè)面顯示大小

2.可視視口（visual viewport）

可視視口為手機(jī)端能看見(jiàn)PC端網(wǎng)頁(yè)的顯示大小，根據(jù)屏幕大小不同，顯示大小也會(huì)不同

3.理想視口（ideal viewport）

理想視口就是布局視口在一個(gè)設(shè)備上的最佳顯示大小，根據(jù)屏幕大小自動(dòng)修改布局視口的尺寸

4.視口設(shè)置代碼
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

其中：
width=device-width，指將視口寬度定義為設(shè)備寬度
minimum-scale=1.0，最小的縮放比例為1倍
maximum-scale=1.0，最大的縮放比例為1倍
user-scalable=no，禁止用戶縮放

1.8 響應(yīng)式網(wǎng)站設(shè)計(jì)實(shí)踐原則

1. 開(kāi)發(fā)模式

• progressive enhancement 漸進(jìn)增強(qiáng)：先從較低版本，兼容性較差的瀏覽器開(kāi)始開(kāi)發(fā)，實(shí)現(xiàn)“能用”，再逐漸往上開(kāi)發(fā)，增加效果，實(shí)現(xiàn)“好看”，此觀念比較老舊
• graceful degradation 優(yōu)雅降級(jí)：直接從最新版本的瀏覽器入手開(kāi)發(fā)，之后做老舊瀏覽器的兼容性適配

2. PC端和手機(jī)端的優(yōu)先原則

• 要根據(jù)網(wǎng)站的需求和性質(zhì)來(lái)選擇，主要面向手機(jī)端用戶的網(wǎng)站要選擇手機(jī)端優(yōu)先
• 根據(jù)團(tuán)隊(duì)或個(gè)人的習(xí)慣來(lái)選擇，沒(méi)有對(duì)錯(cuò)，只有適合

3. 瀏覽器適配原則（優(yōu)先chrome上調(diào)試）

• PC端：Chrome、Firefox、IE8+、Safari
• 手機(jī)端：Google Browas、Safari、QQ瀏覽器、UC瀏覽器、360瀏覽器

4. 內(nèi)容顯示原則

• 不管設(shè)備大小，內(nèi)容可根據(jù)頁(yè)面排版做部分修改，選擇顯示或隱藏

5. 斷點(diǎn)選擇原則

• 0-480 小屏幕
• 481-800 中屏幕
• 801-1400 大屏幕
• 1400+ 巨屏幕

2 組織項(xiàng)目文件目錄結(jié)構(gòu)

2.1 基本目錄結(jié)構(gòu)

1. src //文件資源文件夾

• css //樣式表文件夾
• js //Javascript文件夾
• img //圖片文件夾
• tpl //模板文件夾
• swf //Flash文件
• less //動(dòng)態(tài)樣式表，或者sass

2. doc //文檔文件夾

2.2 常規(guī)文件

1. CSS

• main.css //通用樣式文件
• normalize.css //
• page.css //獨(dú)立頁(yè)面對(duì)應(yīng)的CSS文件

2. JS

• main.js //通用JS文件
• vendor //網(wǎng)站引用的庫(kù)文件夾
• vendor/jquery.min.js //jquery壓縮版js文件

2.3 非常規(guī)文件

1. robots.txt

• 路徑：/src
• 作用：用來(lái)告訴搜索引擎爬蟲(chóng)，該網(wǎng)站可訪問(wèn)和不可訪問(wèn)的頁(yè)面路徑，會(huì)被爬蟲(chóng)第一時(shí)間訪問(wèn)，并依據(jù)該文件爬取網(wǎng)站頁(yè)面

2. favicon.ico

• 路徑：/src
• 作用：用來(lái)被引用為網(wǎng)站的圖標(biāo)，可利用比特蟲(chóng)等在線工具轉(zhuǎn)換。

3. humans.txt

• 路徑：/src
• 作用：用來(lái)說(shuō)明參加網(wǎng)站創(chuàng)建人員的信息，如團(tuán)隊(duì)成員、感謝和站點(diǎn)的技術(shù)信息。點(diǎn)我進(jìn)入官網(wǎng)

4. .editorconfig

• 路徑：根目錄
• 作用：用來(lái)使不同的代碼編輯根據(jù)根據(jù)該文件顯示相同的代碼風(fēng)格，便于程序員在不同IDE中維護(hù)，包括縮進(jìn)格式、編碼格式、換行規(guī)格。點(diǎn)我進(jìn)入官網(wǎng)，了解格式
• 格式：

#editorconfig.org   注釋說(shuō)明此文檔為editorconfig文件

root = true   最頂層的配置文件，之后再不會(huì)查找其他文件

[*] 以下規(guī)則應(yīng)用于所有文件
charset = utf-8   所有文件的編碼格式為utf-8
indent_size = 4   代碼縮進(jìn)的空格數(shù)，可為tab
indent_style = space代碼縮進(jìn)的樣式，為空格
insert_final_newline = true   每個(gè)文件以空白行結(jié)尾
trim_trailing_whitespace = true   去除換行行首的空白字符

[*.md] 以下規(guī)則引用與markdown文件
trim_trailing_whitespace =  false //在md文件中，不去除換行行首的空白字符

5..gitignore

• 路徑：根目錄
• 作用：告訴Git版本工具，哪些文件不需要添加到版本管理中，包括操作系統(tǒng)生成文件、IDE產(chǎn)生的臨時(shí)文件、日志文件、工具自動(dòng)化生成的文件等

6.LICENSE.txt

• 路徑：根目錄
• 作用：用來(lái)存放許可協(xié)議，名稱為大寫(xiě)，包括版權(quán)聲明，開(kāi)源協(xié)議

7.README.md

• 路徑：根目錄
• 作用：用來(lái)存放項(xiàng)目簡(jiǎn)介、使用方式、相關(guān)連接

8.CHANGLOG.md

• 路徑：根目錄
• 作用：用來(lái)存放項(xiàng)目每個(gè)版本的更新，以及說(shuō)明版本號(hào)、更新內(nèi)容、修復(fù)了哪些問(wèn)題等

9.在線MD文件編輯點(diǎn)我進(jìn)入

@更新于2016.10.6 最新更新