相關(guān)新聞
移動(dòng)端的設(shè)備占據(jù)了人們大部分的日常生活，無(wú)論是購(gòu)物、聊天、找工作還是看新聞視頻玩游戲，任何場(chǎng)所地點(diǎn)都能滿足人們的需要。而隨著移動(dòng)端設(shè)備的廣泛流行，網(wǎng)頁(yè)設(shè)計(jì)也進(jìn)入到了一個(gè)新的不同的階段，平常在pc端瀏覽的網(wǎng)頁(yè)出現(xiàn)在各個(gè)分辨率不同的移動(dòng)端時(shí)，頁(yè)面效果發(fā)生了變化，各種問(wèn)題接踵而來(lái)，而網(wǎng)頁(yè)建設(shè)者們?yōu)榱烁蟮馗纳朴脩趔w驗(yàn)想盡了不同的辦法，響應(yīng)式設(shè)計(jì)就應(yīng)運(yùn)而生了。
所謂的響應(yīng)式設(shè)計(jì)就是一個(gè)頁(yè)面根據(jù)不同設(shè)備的分辨率展示出不同的效果，那它是怎么實(shí)現(xiàn)不同分辨率出現(xiàn)不同的展示樣式呢？
第一：為了適應(yīng)屏幕，多數(shù)的移動(dòng)端瀏覽器會(huì)把html網(wǎng)頁(yè)的的寬度縮放成屏幕的寬度（這也是普通網(wǎng)頁(yè)在移動(dòng)端變小不清晰還可以縮放的原因），而我們可以設(shè)置頁(yè)面head里的meta標(biāo)簽的viewport屬性，<meta name="viewport" content="width=device-width, initial-scale=1.0">，我們也可以設(shè)置其他的屬性
頭部添加viewport標(biāo)簽后，html結(jié)構(gòu)布局和平常一樣抒寫就可以.
第二：css部分是最主要部分，我們?cè)谠O(shè)置頁(yè)面寬度的時(shí)候最好不要用絕對(duì)單位值px，而是用%百分比。在寫完特定的一個(gè)css樣式之后，可以使用Media QueriesCSS3 media query ，它像一個(gè)if語(yǔ)句，告訴瀏覽器根據(jù)屏幕的寬度調(diào)取相應(yīng)的css：
上面的圖片就是說(shuō)當(dāng)屏幕不大于410px的時(shí)候就采用下邊的樣式。
由此可見(jiàn)，響應(yīng)式設(shè)計(jì)，其實(shí)是根據(jù)多個(gè)屏幕分辨率寫了不同的css樣式，從而實(shí)現(xiàn)不同的布局展現(xiàn)出的不同的效果。雖然它可以使頁(yè)面效果看起來(lái)比較統(tǒng)一，但是也有一定的缺點(diǎn)，就是代碼工作量大，比較繁瑣
