web響應(yīng)式頁(yè)面舉例分析

本篇內(nèi)容介紹了“web響應(yīng)式頁(yè)面舉例分析”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

1、頁(yè)面頭部的meta說(shuō)明，可以通過(guò)viewport meta標(biāo)簽去讓你的html頁(yè)面的的寬度能根據(jù)設(shè)備分辨率讓瀏覽器的可視寬度來(lái)適應(yīng)，也可以在這里設(shè)置頁(yè)面的縮放比例等等，這樣在成比例的分辨率設(shè)備下，就可以更簡(jiǎn)單地實(shí)現(xiàn)響應(yīng)式。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2、流體布局（fluid grid），所謂的流體布局，其實(shí)就是在你pc端實(shí)現(xiàn)的頁(yè)面基礎(chǔ)上，將一些元素的寬高由原來(lái)的固定多少像素（px）調(diào)整為百分比（%）或字體比例（em）（或布局方面的margin、padding、left、top等以px為單位的值），這也是當(dāng)前實(shí)現(xiàn)響應(yīng)式布局的兩種主要實(shí)現(xiàn)方法。

***種用百分比（%），就是以該元素的父容器的寬高為100%，其他元素的寬高相對(duì)于其父容器的比例，只要將具體的像素值相對(duì)于他的父容器的一個(gè)百分比折算即可。當(dāng)然這種方法的換算有點(diǎn)復(fù)雜，因?yàn)楹芏嘞鄬?duì)的寬高折算的百分比系數(shù)是帶小數(shù)的，所以這時(shí)候可能要你有足夠的耐心才能實(shí)現(xiàn)。

在Ethan Marctte的Responsive Web Design這篇文章中給出的一個(gè)demo中，我們可以看到他的實(shí)際代碼里：

@media screen and (max-width: 400px) { .figure, li#f-mycroft { margin-right: 3.317535545023696682%; /* 21px / 633px */ width: 48.341232227488151658%; /* 306px / 633px */ }

第二種方法是用字號(hào)比例（em）去實(shí)現(xiàn)，其實(shí)方法是跟上面一樣的，只不過(guò)我們將%換成了em，這種方法就是某元素具體的寬高（px）在當(dāng)前基準(zhǔn)字號(hào)（font-size）下折算出多少個(gè)em。eg： 一個(gè)在480分辨率下寬高為64px*64px的元素，其父容器的字號(hào)（font-size）為20px，那么它折算成em為單位就是3.2em*3.2em。當(dāng)其父容器字號(hào)基準(zhǔn)根據(jù)不同的分辨率變化的時(shí)候，該元素的寬高也能根據(jù)這個(gè)字號(hào)基準(zhǔn)成比例的縮放，就能實(shí)現(xiàn)響應(yīng)式變化。

從上面的兩張實(shí)例圖我們可以看到，同一個(gè)元素，寬高為3.2em*3.2em，在360px分辨率下，因?yàn)榛鶞?zhǔn)字號(hào)為15px，故解析出來(lái)的實(shí)際尺寸為48px*48px，而在480px分辨率下，基準(zhǔn)字號(hào)為20px，故實(shí)際的尺寸為64px*64px。

3、流體圖片（liquid image），在我所了解的很多資料中，對(duì)圖片處理這塊，如果要使圖片能根據(jù)分辨率來(lái)適應(yīng)，而且還不失真，好像挺困難的。但其實(shí)我們不用考慮的那么復(fù)雜，我們要做的只是讓圖片能根據(jù)不同分辨率自適應(yīng)罷了，我們不管圖片會(huì)不會(huì)因?yàn)楸焕於д?，因?yàn)檎娴挠龅竭@樣的情況，我們可以考慮在不同分辨率下使用不同的圖片，這樣就簡(jiǎn)單多了。所以讓圖片尺寸自適應(yīng)，我們只要不給圖片設(shè)定具體的寬高尺寸，只要在樣式中給該圖片一個(gè)width：100%，這樣圖片就能根據(jù)它父容器的尺寸自動(dòng)調(diào)整了。

4、媒體查詢（media query），這個(gè)也是響應(yīng)式頁(yè)面的一個(gè)關(guān)鍵技術(shù)，根據(jù)不同的分辨率去調(diào)整一些不同的樣式。

@media screen and (max-device-width: 480px) { .column { float:none; } }

通過(guò)上面的這樣媒體查詢結(jié)構(gòu)，我們可以設(shè)定在不同分辨率下選用不同的樣式來(lái)調(diào)整響應(yīng)式頁(yè)面。像前面第二點(diǎn)流體布局上，我們使用百分比或字號(hào)比例去實(shí)現(xiàn)流體布局的時(shí)候，***種方法是可以不用媒體查詢直接實(shí)現(xiàn)流體布局的，就是元素的寬高能自適應(yīng)不同分辨率屏幕。

但第二種方法用字號(hào)比例（em）去實(shí)現(xiàn)流體布局的時(shí)候，我們就必須要結(jié)合媒體查詢了，因?yàn)槲覀兊淖痔?hào)比例是根據(jù)基準(zhǔn)字號(hào)來(lái)實(shí)現(xiàn)的，就是說(shuō)在基準(zhǔn)字號(hào)一定的情況下，該元素的大小就是固定的，而我們要實(shí)現(xiàn)該元素尺寸自適應(yīng)，就只能通過(guò)調(diào)整基準(zhǔn)字號(hào)來(lái)實(shí)現(xiàn)了。通過(guò)媒體查詢，我們可以讓在基準(zhǔn)字號(hào)font-size在不同分辨率下不一樣，這樣其子元素相對(duì)于該字號(hào)的比例em算出來(lái)的像素px就不一樣了，這樣就能實(shí)現(xiàn)響應(yīng)式了。

所以我們兼容不同的分辨率的時(shí)候，可以先在某個(gè)分辨率下，實(shí)現(xiàn)***的重構(gòu)，然后將所有元素具體的尺寸（px）折算為em（根據(jù)父容器的font-size），然后再通過(guò)媒體查詢，調(diào)整不同分辨率下的基準(zhǔn)字號(hào)font-size就能實(shí)現(xiàn)具體的響應(yīng)式了。

當(dāng)然媒體查詢的功能是根據(jù)不同的分辨率適配不同的樣式，我們可以通過(guò)上面的做法是實(shí)現(xiàn)流體布局，還可以通過(guò)媒體查詢來(lái)細(xì)調(diào)具體的頁(yè)面在不同分辨率下的不同表現(xiàn)形式。

在我具體的項(xiàng)目過(guò)程中，采用媒體查詢主要是調(diào)整不同分辨率下的基準(zhǔn)字號(hào)的大小，具體如下面的代碼所示：

body,section,button,h1,p,.layer,.downall_btn,.introduce,.playlist,.recom_picbox{font-size:20px;} /* for 800 px width screen */ @media only screen and (max-device-width:800px),only screen and (max-width:800px){ body,section,button,h1,p,.layer,.downall_btn,.introduce,.playlist,.recom_picbox{font-size:33.34px;} } /* for 720 px width screen */ @media only screen and (max-device-width:720px),only screen and (max-width:720px){ body,section,button,h1,p,.layer,.downall_btn,.introduce,.playlist,.recom_picbox{font-size:30px;} }

前面設(shè)置通用字號(hào)為20px，當(dāng)分辨率超過(guò)我媒體查詢到的***屏幕寬度的時(shí)候就適配該基準(zhǔn)字號(hào)，下面分別通過(guò)媒體查詢?yōu)榉直媛蕿?00px和720px的設(shè)備詳細(xì)調(diào)整基準(zhǔn)字號(hào)，（當(dāng)然在這里你可以增加更多的樣式去調(diào)整不同分辨率下的具體表現(xiàn)）使頁(yè)面在兩個(gè)分辨率下都能有比較好的表現(xiàn)?？梢园l(fā)現(xiàn)，在800px的分辨率設(shè)備中，我的基準(zhǔn)字號(hào)設(shè)置為33.34px，在720px的分辨率設(shè)備下的基準(zhǔn)字號(hào)為30px。

“web響應(yīng)式頁(yè)面舉例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！