淺談web響應式布局

隨著移動端設備的普及，越來越多的人在移動設備上瀏覽網(wǎng)頁。然而傳統(tǒng)的網(wǎng)頁是基于PC來布局的，不適合在移動端觀看，由此，響應式網(wǎng)站逐漸發(fā)展并得到了普及。
響應式布局，顧名思義就是一個網(wǎng)站可以在pc端和移動端瀏覽，并且根據(jù)這兩種設備的不同特性展現(xiàn)出不同的樣式結構。簡言之，是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本。
實現(xiàn)頁面響應式主要使用到的是css3中的媒體查詢屬性，即@media屬性。通過設置該屬性，可以在對應查詢的媒體中設置對應的樣式，來達到在不同設備上面顯示對應頁面結構和外觀。一般在設置媒體查詢屬性時，將媒體分為1200px以上的大分辨率設備，992~1200px的中等分辨率設備，768~992px的平板設備，以及小于768px的手機設備。當然，這些分界點也可以根據(jù)實際需要進行修改。

響應式網(wǎng)站的優(yōu)勢在于多終端視覺和操作體驗非常風格統(tǒng)一，并且響應式網(wǎng)站兼容當前及未來新設備 。響應式web設計中的大部分技術可以用在WebApp開發(fā)中，能夠節(jié)約開發(fā)成本，維護成本也降低很多。響應的方式主要有兩種，一種是移動優(yōu)先，即在設計的初期就要考慮的頁面如何在多終端顯示；另一種則是漸進增強，這樣做能充分發(fā)揮硬件設備的大功能。
在實際開發(fā)中，也會使用一些響應式框架，比如bootstrap等。bootstrap框架的網(wǎng)格系統(tǒng)非常適合于制作響應式網(wǎng)站。在網(wǎng)頁中經(jīng)常會有一些元素并排顯示，然而在移動端并排顯示影響顯示效果，我們需要讓他們單排顯示。在之前，我們需要使用媒體查詢，在不同的設備中寫不同的樣式。如果使用bootstrap的網(wǎng)格系統(tǒng)，我們僅需要添加簡單的類名就能實現(xiàn)這一效果。bootstrap中也有許多自帶的樣式和插件，使用起來也十分方便。

當然響應式網(wǎng)站具有一定的缺點，比如在低版本瀏覽器兼容性有問題。在移動帶寬流量方面，相比較手機定制網(wǎng)站，流量稍大，但比較加載一個完整pc端網(wǎng)站顯然是小得多。代碼累贅，會出現(xiàn)隱藏無用的元素，加載時間加長。兼容各種設備工作量大。所以對于重內(nèi)容的網(wǎng)站，例如形象展示，則比較適合使用響應式web設計，然而對于重功能的網(wǎng)站，如電子商務類，則更推薦使用獨立移動網(wǎng)站。
雖然存在一些局限性，但對于大部分展示型網(wǎng)站，響應式網(wǎng)站無非是最適合的選擇。

本文標題：淺談web響應式布局
當前路徑：http://m.kartarina.com/news33/220483.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供服務器托管、自適應網(wǎng)站、外貿(mào)建站、移動網(wǎng)站建設、商城網(wǎng)站、電子商務

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)