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