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

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

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

本文標(biāo)題：淺談web響應(yīng)式布局
當(dāng)前路徑：http://aaarwkj.com/news33/220483.html

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

廣告

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