文章插圖
一、背景介紹 隨著智能手機的迅速發(fā)展，大眾群體使用手機訪問互聯(lián)網(wǎng)的頻率已經(jīng)大大提升，手機的屏幕比較小，寬度通常在600像素以下；PC的屏幕寬度，一般都在1000像素以上（目前主流寬度是1366×768），有的還達(dá)到了2000像素 。同樣的內(nèi)容，要在大小迥異的屏幕上，都呈現(xiàn)出滿意的效果，并不是一件容易的事，傳統(tǒng)的只能在pc端顯示的網(wǎng)頁，如何適應(yīng)這個潮流，也成了人們開始關(guān)注和解決的問題 。于是響應(yīng)式布局的概念就被提出來了 。
二、什么是響應(yīng)式布局 響應(yīng)式布局簡而言之，就是一個網(wǎng)站能夠兼容多個終端，而不是為每個終端做一個特定的版本 。這個概念是為解決移動互聯(lián)網(wǎng)瀏覽而誕生的 。響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設(shè)備的普及，用“大勢所趨”來形容也不為過 。
三、響應(yīng)式布局的優(yōu)點1、響應(yīng)式設(shè)計可以向用戶提供友好的Web界面，同樣的布局，卻可以在不同的設(shè)備上有不同排版，這就是響應(yīng)式最大的優(yōu)點，現(xiàn)在技術(shù)發(fā)展日新月異，每天都會有新款智能手機推出 。如果你擁有響應(yīng)式Web設(shè)計，用戶可以與網(wǎng)站一直保持聯(lián)系，而這也是基本的，也是響應(yīng)式實現(xiàn)的初衷 。
2、跨平臺和終端且不需要分配子域名
3、面對不同分辨率設(shè)備靈活性強
四、響應(yīng)式布局的缺點1、為了適配不同的設(shè)備，響應(yīng)式設(shè)計需要大量專門為不同設(shè)備打造的css及js代碼，這導(dǎo)致文件增大，效率低下代碼累贅，會出現(xiàn)隱藏?zé)o用的元素，加載時間加長，影響頁面加載速度，其實這是一種折衷性質(zhì)的設(shè)計解決方案，多方面因素影響而達(dá)不到最佳效果 。
2、在響應(yīng)式設(shè)計中，圖片、視頻等資源一般是統(tǒng)一加載的，這就導(dǎo)致在低分辨率的機子上，實際加載了大于它的顯示要求的圖片或視頻，導(dǎo)致不必要的流量浪費，影響加載速度 。
3、移動端和電腦端的很多交互組件差異比較大，例如：日期選擇控件，電腦端更多的是彈出選擇控件，移動端是picker選擇，響應(yīng)式布局很難做到在不同平臺使用不同的交互組件
4、電腦端的生態(tài)比較單一，一般只需要考慮各個瀏覽器兼容就行，但移動端的生態(tài)就比較豐富，移動端h5頁面，微信公眾號h5，小程序內(nèi)h5，對各生態(tài)的api功能對接上，一套代碼里需要通過大量的代碼去判斷不同生態(tài)分別走不同的程序分支，這對于代碼的維護提出了極高的要求
五、適合做響應(yīng)式布局的應(yīng)用 內(nèi)容型及資訊型網(wǎng)站，很適合響應(yīng)式的布局，例如官方網(wǎng)站，新聞資訊網(wǎng)站，審批類網(wǎng)站，此類網(wǎng)站主要用于內(nèi)容瀏覽及確認(rèn)，用戶交互比較少，只需要根據(jù)不同屏幕尺寸調(diào)整頁面內(nèi)容展示
六、不適合做響應(yīng)式布局的應(yīng)用 大型門戶、電商網(wǎng)站、后臺管理應(yīng)用不太適合響應(yīng)式布局，因為響應(yīng)式設(shè)計的基本原則是不會因設(shè)備不同而給予用戶不同的內(nèi)容（比如在低分辯率設(shè)備上刪減某些內(nèi)容），而這些網(wǎng)站的單頁內(nèi)容非常多，當(dāng)縮減到低分辨率設(shè)備上，又要保證內(nèi)容全部可瀏覽時，必然導(dǎo)致頁面拉長，瀏覽難度增加，所以很多大型門戶或電商網(wǎng)站都會提供一個移動設(shè)備版的網(wǎng)站，或者干脆直接讓用戶縮放網(wǎng)頁進(jìn)行瀏覽 。為不同的設(shè)備提供優(yōu)化的瀏覽體驗，這個肯定是網(wǎng)站開發(fā)所追求的目標(biāo)，也是網(wǎng)站技術(shù)發(fā)展的趨勢 。但響應(yīng)式設(shè)計只是實現(xiàn)這一目標(biāo)的其中一個手段，只適用于某些類型的網(wǎng)站，不可一概而論
以上關(guān)于本文的內(nèi)容，僅作參考！溫馨提示：如遇健康、疾病相關(guān)的問題，請您及時就醫(yī)或請專業(yè)人士給予相關(guān)指導(dǎo)!
「愛刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容，希望對您有所幫助：- 詳解c正則表達(dá)式應(yīng)用 c正則表達(dá)式提取字符串
- 詳解hdd硬盤檢測工具用法 hdd檢測工具再怎么看
- 詳解簡易戶外健身法
- 詳解web安全性測試方法 web安全性測試的項目有哪些
- 詳解專業(yè)硬盤數(shù)據(jù)恢復(fù)工具 硬盤軟件哪個好
- 圖文詳解iTunes連接教程 itunes怎么連接蘋果手機
- 圖文詳解其剪切工具及方法 音頻剪切器怎么剪切中間一段
- 常吃菜花有什么營養(yǎng)價值及功效 菜花的好處詳解
- 詳解肌肉男的健身要素
- 自帶的多媒體播放程序詳解 win7自帶播放器怎么旋轉(zhuǎn)視頻