所向披靡的響應(yīng)式開發(fā)
響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)，自己也一直想清楚的去接觸下響應(yīng)式網(wǎng)站的開發(fā)，所以前段時(shí)間學(xué)習(xí)了該課程，滿滿的干貨，碰巧慕課又搞了活動(dòng)，今天就來和大家分享下。由于網(wǎng)上的資源實(shí)在是太多，所以文章中更注重開發(fā)流程的分享，技能知識(shí)點(diǎn)可能不夠詳細(xì)，大家若感興趣，可以去搜索某個(gè)知識(shí)點(diǎn)，去閱讀相關(guān)文檔和標(biāo)準(zhǔn)。:)
1. 響應(yīng)式網(wǎng)站相關(guān)概念
學(xué)習(xí)一個(gè)知識(shí)，必須要對(duì)其認(rèn)識(shí)透徹，掌握其基本的概念
什么是響應(yīng)式網(wǎng)站 ：
響應(yīng)式網(wǎng)站是一個(gè)設(shè)計(jì)理念，它是多項(xiàng)技術(shù)的綜合體，大概包括三大技術(shù)成分： 流動(dòng)網(wǎng)格、彈性布局、媒介查詢等。
簡(jiǎn)而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這個(gè)概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的。響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)。通過媒體查詢，我們可以進(jìn)行樣式重構(gòu)，對(duì)樣式進(jìn)行有選擇的顯示和隱藏。優(yōu)缺點(diǎn) ：
任何東西都不是玩美的，總是優(yōu)缺點(diǎn)共存，響應(yīng)式開發(fā)技術(shù)也不列外，其優(yōu)點(diǎn)有節(jié)省開發(fā)時(shí)間和成本、面對(duì)不同設(shè)備分辨率的靈活支持和優(yōu)雅展示、利于SEO等；缺點(diǎn)也很明顯，如會(huì)加載更多的樣式和腳本資源、設(shè)計(jì)比較難**的定位和控制、兼容性的尷尬等。如何編寫 ：
響應(yīng)式，實(shí)現(xiàn)原理就是使用相對(duì)單位并配合媒體查詢來實(shí)現(xiàn)頁面，我們只需要根絕設(shè)計(jì)圖,將**單位px轉(zhuǎn)換為相對(duì)單位rem或者em并配合@media即可，具體的編寫開發(fā)流程，就是這篇文章的流程需要什么樣的技術(shù) ：
基本的HTML 、CSS、JavaScript 我們不必多言，除此之外，實(shí)踐原則 ：
在設(shè)計(jì)實(shí)現(xiàn)中，遵循progressive enhancement（漸進(jìn)增強(qiáng)）和graceful degradation（優(yōu)雅降級(jí)）這兩大基本原則，另外的，還需要根據(jù)項(xiàng)目要求來選擇對(duì)某個(gè)設(shè)備進(jìn)行優(yōu)先設(shè)計(jì)，判斷每個(gè)設(shè)備展示頁面之間是否需要包含相同的內(nèi)容，以及斷點(diǎn)的選擇，其中，斷點(diǎn)的選擇尤為重要，除特殊情況，如項(xiàng)目的要求，我們盡量不要對(duì)特定的設(shè)備進(jìn)行選擇和設(shè)計(jì)（如,針對(duì)紅米2s進(jìn)行設(shè)計(jì)一套頁面）組織目錄結(jié)構(gòu) ：
原則：約定優(yōu)于配置、約定代碼結(jié)構(gòu)或命名規(guī)范來減少配置數(shù)量。
良好的目錄結(jié)構(gòu)有利于我們后面的書寫。有用的文件 ：
在標(biāo)準(zhǔn)的小型項(xiàng)目中，我們需要幾個(gè)基本的頁面，比如：404頁面（以及其他錯(cuò)誤頁面）、rotots.txt、favicon.icon、humans.txt、.editorconfig、gitgnore、LICENSE.txt、README.md、CHANGELOG.md等文件以及markdown。2.拿到設(shè)計(jì)圖的我們?cè)撟鲂┦裁矗?/p>
對(duì)于一個(gè)合格前端人員，我們?cè)谀玫皆O(shè)計(jì)圖和需求的時(shí)候，我們要做的不是立馬去敲代碼，而是先去理性的分析和交流，該怎么做，怎么實(shí)現(xiàn)可以更好，實(shí)現(xiàn)的難易度等這些問題都是我們需要注意的。
和設(shè)計(jì)師交流網(wǎng)站如何交互
確定設(shè)計(jì)規(guī)范，如字體，間距，顏色等
設(shè)計(jì)稿的處理
布局結(jié)構(gòu)分析
切圖4.開始編寫HTML和CSS代碼
前面的工作做好之后，我們便可以編寫代碼了，在這個(gè)過程中，我們需要注意的是，這里我們是先實(shí)現(xiàn)了PC端的樣式，醉后在實(shí)現(xiàn)的移動(dòng)端的樣式，對(duì)于先實(shí)現(xiàn)哪個(gè)，這就是前面說的要根據(jù)項(xiàng)目需求來確定，如果沒有要求，一般的我們都是先實(shí)現(xiàn)PC端的樣式。下面，我給大家分享了在這里我們都用到了哪些知識(shí)點(diǎn)、需要注意什么以及從某個(gè)屬性中，我們是否可以掌握其它知識(shí)，從點(diǎn)到面的進(jìn)行學(xué)習(xí)。其中，或許有些知識(shí)點(diǎn)對(duì)我們敲代碼來說不是那么重要，但是全面掌握和了解W3C中的標(biāo)準(zhǔn)規(guī)范，可以讓前端這個(gè)體系在我們腦海中更加穩(wěn)固，這也是我的一種在學(xué)習(xí)體驗(yàn)，希望可以幫助到大家。:)
lang屬性：
翻閱W3C標(biāo)準(zhǔn)，對(duì)lang的介紹是這樣的，HTML 的 lang 屬性可用于網(wǎng)頁或部分網(wǎng)頁的語言。這對(duì)搜索引擎和瀏覽器是有幫助的。W3C標(biāo)準(zhǔn)規(guī)定，應(yīng)該通過 <html> 標(biāo)簽中的 lang 屬性對(duì)每張頁面中的主要語言進(jìn)行聲明，同時(shí)，也規(guī)定了lang 屬性在以下標(biāo)簽中無效：<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param> 以及 <script>。meta標(biāo)簽：
課程中，對(duì)于響應(yīng)式的處理，如規(guī)定視口大小，規(guī)定以醉新的IE瀏覽器來渲染，這些屬性都用到了<meta>標(biāo)簽，所以，我們可以對(duì)<meta>標(biāo)簽進(jìn)行全面的了解一下。
其定義和用法如下：<meta>元素永遠(yuǎn)位于文檔的頭部（head），該元素的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對(duì)，可提供有關(guān)頁面的元信息，添加頁面關(guān)鍵詞，有利于SEO。
其中，在XHML中，<meta>必須被正確的關(guān)閉；HTML中，<meta>沒有結(jié)束標(biāo)簽。
在<meta>標(biāo)簽中，必須的屬性為content屬性，可選的屬性為http-equiv、name、scheme，每個(gè)屬性的具體情況大家有興趣可以去查閱W3C文檔標(biāo)準(zhǔn)。viewport：
所謂viewport，就是視口的意思，分為PC桌面視口和移動(dòng)端視口，在PC端中，viewport只有一個(gè)視口，就是主窗口的區(qū)域；而在移動(dòng)端中，就有了三個(gè)視口的概念，分別是布局視口、可視視口、理想視口。條件注釋判斷：
對(duì)于IE老舊的瀏覽器來說，響應(yīng)式的設(shè)計(jì)在其上面的顯示比較糟糕，為了提高用戶體驗(yàn)，我們可以對(duì)于那些使用低版本的IE瀏覽器的用戶進(jìn)行友好提醒，使用條件注釋判斷是不錯(cuò)的選擇。觀察分析頁面結(jié)構(gòu)，注意區(qū)域的劃分：
在開始著手書寫HTML結(jié)構(gòu)的時(shí)候，我們應(yīng)該先分析頁面可以分為幾個(gè)區(qū)域，哪些區(qū)域的代碼可以復(fù)用，這樣可以更好的稿效開發(fā)。標(biāo)簽的語義化：
標(biāo)簽的語義化相信大家都很熟悉，語義化可以是我們更好的開發(fā)網(wǎng)站，在團(tuán)隊(duì)中更好的協(xié)作，同時(shí)也利于SEO等，例如，課程中就使用了header、footer、nav、article、section等HTML5語義化標(biāo)簽。class和id的建議：
一般都是用class定義樣式，id一般用于js快速的卻別和獲取元素，class一般都用中橫線分隔，id一般都是用駝峰命名法。img標(biāo)簽的建議：
對(duì)于必不可少的圖片使用<img>引入，對(duì)于可有可無的裝飾性圖片可以使用樣式中的background屬性來引入。工具樣式 ： 所謂工具樣式，就是我們提前寫好一些樣式，如清除浮動(dòng)、文本對(duì)齊方式樣式等，在我們需要的時(shí)候，直接使用其定義好的class名字即可，非常的方便。
相對(duì)單位rem和em :
我們先來看下em，em相對(duì)參參照物為父元素font-size，具有繼承的特點(diǎn)，缺點(diǎn)是因?yàn)橐蕾嚫冈氐拇笮?，容易混亂；
rem的相對(duì)參照物為根元素html，固定不變。
其中，他倆在瀏覽器的默認(rèn)設(shè)置中，1個(gè)em或者rem 都等于16px。
-HTML中的空白符：HTML中空白符會(huì)在某些瀏覽器（如chrome）中導(dǎo)致一些小BUG，導(dǎo)致元素之間存在間隙，如圖：
，
解決辦法有多種方案：如刪除換行符、使用float、對(duì)父元素設(shè)置font-size：0、使用CSS4中的white-space-collapsing。雪碧圖的使用 ：
雪碧圖就是將多個(gè)小圖標(biāo)合并到一張大圖上，利用background-position屬性和容器的寬高，就可以定位到想要的圖標(biāo)位置，優(yōu)點(diǎn)就是可以更快速的加載圖片。width:calc()屬性 ：
該屬性是CSS3中的新增屬性，簡(jiǎn)單的說，calc()可以進(jìn)行計(jì)算，比如“width:calc(50% + 2em)”，這樣一來你就不用考慮元素的寬度值到底是多少，瀏覽器會(huì)自動(dòng)去計(jì)算出結(jié)果。如何選擇第三方組件 ：
對(duì)于第三方組件的選擇，我們基本遵循以下幾種原則：使用人數(shù)的多少、是否開源、文檔是否齊全、活躍性、輕量級(jí)
5.移動(dòng)端樣式的實(shí)現(xiàn)
移動(dòng)端樣式實(shí)現(xiàn)的原理，就是利用了媒體查詢功能。由于PC端的樣式在前面的HTML和CSS樣式的書寫這一步驟中，我們基本就可以實(shí)現(xiàn)，移動(dòng)端的樣式，我們只需要利用@media屬性基本上就可以實(shí)現(xiàn)。
@media屬性：
前面我們已經(jīng)提到，實(shí)現(xiàn)響應(yīng)式網(wǎng)站的開發(fā)關(guān)鍵就是配合使用媒介查詢@media這一屬性，該屬性是CSS3中的屬性（早在CSS2中已經(jīng)出現(xiàn)部分屬性）。其語法相當(dāng)于一個(gè)判斷語句，可以理解為當(dāng)滿足某個(gè)條件的時(shí)候，去添加括號(hào)內(nèi)的樣式。如何選擇媒介查詢的單位：
在媒體查詢中，相對(duì)單位rem和em的基準(zhǔn)高于html，所以與在html中設(shè)置的rem大小并不一致！這里的rem或em依然是：1rem=1em=16px。另外，rem兼容性不如em，故采用兼容性更好的em為媒體查詢的斷點(diǎn)單位。
5.兼容性處理
對(duì)于兼容性的問題，我們實(shí)在沒有更好的辦法，走的坑越多，說明功力越深厚。當(dāng)我們面對(duì)一個(gè)一個(gè)坑的時(shí)候，能做的就是利用所有工具，如瀏覽器的開發(fā)者工具，去查找原因，同時(shí)，我們也應(yīng)該多多閱讀前輩的文章，獲得經(jīng)驗(yàn)，避免落入同一個(gè)坑，坦然的去面對(duì)，去解決，才是一個(gè)正確的解決方式。
6.打包發(fā)布
發(fā)布之前 ：
在發(fā)布之前，我們醉好進(jìn)行文件代碼的壓縮、合并以及增加版本號(hào)工具的使用 :
自動(dòng)化構(gòu)建工具的打包工具有Grunt和Gulp，靜態(tài)資源打包工具有Webpack，我們可以根據(jù)實(shí)際情況來選擇使用。
7.總結(jié)
除了上述的建議和知識(shí)點(diǎn)，課程中還有其他小技巧，如利用CSS3選擇器進(jìn)行快捷的選擇，清除浮動(dòng)的幾種方法等。
對(duì)于響應(yīng)式網(wǎng)站的開發(fā)，其大致原理就是使用相對(duì)單位配合媒體查詢屬性，掌握原理后我們就需要去學(xué)習(xí)掌握相關(guān)知識(shí)點(diǎn)，然后由點(diǎn)到面的學(xué)習(xí)，實(shí)戰(zhàn)課程不僅僅可以彌補(bǔ)我們相關(guān)技能知識(shí)的缺失，更重要的是開發(fā)思想，真切的體驗(yàn)開發(fā)流程，學(xué)以致用。正如課程中老師所總結(jié)的那樣，前端技術(shù)更新快速，但是萬變不離其宗，響應(yīng)式網(wǎng)站的開發(fā)更多的是對(duì)CSS、HTML以及JS的理解和掌握，多閱讀文檔規(guī)范，多動(dòng)手，努力跟上技術(shù)更新的步伐，才能運(yùn)用自如。
醉后，短短的一篇文章，實(shí)在難以詳細(xì)的分享該課程的所有知識(shí)點(diǎn)和思想，想了解@media屬性和rem、em相對(duì)單位以及其他響應(yīng)式開發(fā)的知識(shí)大家可以去搜索相關(guān)文章，獲得更詳細(xì)更標(biāo)準(zhǔn)的介紹。文采和知識(shí)水平有限，如有錯(cuò)誤和不足，還請(qǐng)大家諒解，指出。
鏈接: https://pan.baidu.com/s/1NgOdrL2KzSegWyWbHVeGXg 提取碼: qqqg 復(fù)制這段內(nèi)容后打開百度網(wǎng)盤手機(jī)App，操作更方便哦
