關(guān)于響應(yīng)式頁(yè)面重構(gòu)的一些關(guān)鍵技術(shù)點(diǎn)

時(shí)間：2022-05-29 08:21:01 | 來(lái)源：網(wǎng)絡(luò)營(yíng)銷(xiāo)

時(shí)間：2022-05-29 08:21:01 來(lái)源：網(wǎng)絡(luò)營(yíng)銷(xiāo)

作為一個(gè)網(wǎng)絡(luò)營(yíng)銷(xiāo)人員，不懂移動(dòng)設(shè)備是不行的。而作為一個(gè)站長(zhǎng)，不會(huì)寫(xiě)響應(yīng)式頁(yè)面更是不行得。而我，一個(gè)小博主，在我最近做的一個(gè)移動(dòng)端的項(xiàng)目之前，的確是不會(huì)寫(xiě)響應(yīng)式頁(yè)面的，所以，嚴(yán)格來(lái)說(shuō)，在這個(gè)項(xiàng)目之前，我是一個(gè)不合格的站長(zhǎng)。

而這個(gè)項(xiàng)目，卻讓我快速地掌握了響應(yīng)式頁(yè)面重構(gòu)的一些方法，下面就是通過(guò)這個(gè)項(xiàng)目來(lái)總結(jié)我在響應(yīng)式頁(yè)面重構(gòu)學(xué)到的東西。

眾所周知，所謂響應(yīng)式頁(yè)面，就是能夠用一套樣式，使你的頁(yè)面能夠在不同分辨率的屏幕下都有很好的表現(xiàn)形式。響應(yīng)式Web設(shè)計(jì)，這個(gè)概念是Ethan Marctte 在A List Apart 發(fā)表的一篇文章“Responsive Web Design”中援引響應(yīng)式建筑而得名：響應(yīng)式建筑（responsive architecture），物理空間應(yīng)該可以根據(jù)存在于其中的人的情況進(jìn)行相應(yīng)。

根據(jù)我所閱讀過(guò)一些文章及資料，我總結(jié)出響應(yīng)式頁(yè)面的幾個(gè)關(guān)鍵組成部分：

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、頁(yè)面寬度問(wèn)題

主要內(nèi)容部分，目前PC端頁(yè)面主要的分辨率一般都在960以上：960、1000、1200等，這些都屬于正常的尺寸，但也有設(shè)計(jì)師做出類(lèi)似973、1011等奇葩尺寸，這個(gè)問(wèn)題我不太好意思拿出來(lái)聊，太低級(jí)了。

當(dāng)然，奇葩的單數(shù)行高、相同元素不同大小等等這都是屬于相似問(wèn)題。

3、毛邊問(wèn)題

一個(gè)方方正正的按鈕，帶著一圈毛邊。這個(gè)問(wèn)題也是在重構(gòu)中經(jīng)?？吹降氖虑椋m然這個(gè)在寫(xiě)頁(yè)面的時(shí)候可以很輕易的避開(kāi)這個(gè)問(wèn)題，但是不是看著很不爽？看下圖：

正常邊給人的感覺(jué)整齊干凈，毛邊顯得邊緣模糊不清，并且容易造成按鈕高度不明確。假如是半透明按鈕需要切圖的時(shí)候，還會(huì)造成圖片體積變大，所以這個(gè)問(wèn)題應(yīng)當(dāng)避免。

4、圖層模式

有些設(shè)計(jì)圖中，某個(gè)元素例如某個(gè)按鈕，需要切png半透明圖片，但是這個(gè)按鈕居然跟背景圖是正片疊底或者顏色疊加。每當(dāng)我遇到這個(gè)問(wèn)題的時(shí)候會(huì)有一股想自殺的沖動(dòng)，所以為了世界和平，這個(gè)問(wèn)題一定要避免。

5、圖層鏈接

頁(yè)面重構(gòu)的某些時(shí)候需要選擇某些圖層進(jìn)行移動(dòng)，結(jié)果一動(dòng)發(fā)現(xiàn)壞了，好多其它的元素跟著刷刷移動(dòng)，瞬間感覺(jué)無(wú)力，默默的一個(gè)個(gè)取消圖層鏈接。不需要的圖層鏈接，能取消就取消吧！

6、某些圖片的尺寸

例如在某些列表中，縮略圖的尺寸，經(jīng)常會(huì)遇到119*73等等奇怪的尺寸，其實(shí)這種最好是用整數(shù)：120*80等，對(duì)頁(yè)面的柵格化、響應(yīng)式以及后臺(tái)裁圖存圖等都有很大的好處。

7、奇葩的邊距和填充

同等級(jí)的模塊，從視覺(jué)及內(nèi)容上都屬于同一類(lèi)型，但上下邊距一個(gè)20px，一個(gè)27px；左右填充一個(gè)10px，一個(gè)7px，這種問(wèn)題跟頁(yè)面寬度問(wèn)題類(lèi)似，都屬于低等級(jí)問(wèn)題。

8、圖片確實(shí)是響應(yīng)式設(shè)計(jì)的一大問(wèn)題

圖片分為背景圖片和通過(guò)img標(biāo)簽引入的圖片，前者可以通過(guò)media query自動(dòng)的切換不同分辨率的版本，但是在不支持background image size的瀏覽器中背景圖片無(wú)法無(wú)級(jí)的調(diào)整大小（也就是在media query切換css的點(diǎn)上可以換一張不同分辨率的圖，但是沒(méi)法兒獲得兩張分辨率中間大小的版本），而且在很多情況下（比如cms中）并不適合用背景圖片。

如果是img標(biāo)簽引入的圖片，可以使用延遲加載的方式來(lái)加載，在實(shí)際加載圖片之前先用js檢查窗口寬度，然后加載不同分辨率的圖片，比如寬度<=480,就加載80px寬度的圖片，480 < 寬度 <= 768，加載120px的圖片，寬度> 768則加載160px的圖片，如果寬度是600px怎么辦呢？通過(guò)百分比來(lái)縮放120px的圖片達(dá)到合適的結(jié)果。

這樣做的好處是對(duì)于移動(dòng)設(shè)備來(lái)說(shuō)，下載的圖片會(huì)小一些，減少網(wǎng)頁(yè)加載的時(shí)間。但是問(wèn)題是豎屏向橫屏切換或者擴(kuò)大瀏覽器窗口寬度時(shí)圖片會(huì)由于放大而產(chǎn)生一定的模糊感。

我覺(jué)得響應(yīng)式設(shè)計(jì)中對(duì)于圖片的考慮應(yīng)該從布局設(shè)計(jì)就開(kāi)始，盡量使圖片在各個(gè)窗口寬度下的尺寸不要相差過(guò)大，通過(guò)排布更多的內(nèi)容而不是擴(kuò)大圖片的尺寸來(lái)填充由于瀏覽器窗口擴(kuò)大帶來(lái)的空間，這樣可以有效的減少圖片放大模糊的問(wèn)題（具體可查看億企邦《響應(yīng)式網(wǎng)頁(yè)圖片庫(kù)設(shè)計(jì)的基本規(guī)則和技巧》的相關(guān)介紹）。

9、不做極限設(shè)計(jì)

假如要設(shè)計(jì)一個(gè)按鈕，放在某個(gè)比較小的模塊里，那么請(qǐng)考慮一下按鈕包含的字?jǐn)?shù)最長(zhǎng)的情況下是怎樣的。

再比如一個(gè)類(lèi)似微博名片的東西的簡(jiǎn)介，設(shè)計(jì)圖中做了30個(gè)字，那么請(qǐng)考慮下100個(gè)字的情況。假如需要做截字，請(qǐng)規(guī)定多少字或者幾行字開(kāi)始截，不要讓前端去猜。

10、css3圓角還是切圖圓角？css3投影還是切圖投影？

在遇到這種糾結(jié)的時(shí)候，請(qǐng)聯(lián)系設(shè)計(jì)師以及產(chǎn)品經(jīng)理，講明兩種方式的優(yōu)劣，這個(gè)問(wèn)題可延展到其它類(lèi)似css3實(shí)現(xiàn)效果的問(wèn)題。

11、切勿各種寬度寫(xiě)死，各種切大圖啪啪啪

前者會(huì)導(dǎo)致，只要編輯或者數(shù)據(jù)與設(shè)計(jì)圖中的不一樣，你的頁(yè)面效果就完全“不一樣”了，做頁(yè)面重構(gòu)怎么算優(yōu)秀?最大程度的模塊化、最大程度的模塊可移植性、最大程度的自適應(yīng)性、各種極限情況的考慮。也就是你考慮的情況越多，自適應(yīng)性越強(qiáng)，你的代碼越健壯。

后者會(huì)導(dǎo)致啥？后臺(tái)或者編輯拿著刀子捅你?。?！

12、字體問(wèn)題

假如一段需要后期編輯或者拿數(shù)據(jù)的文字內(nèi)容，設(shè)計(jì)圖里是一個(gè)特殊字體，例如：“方正蘭亭西黑”，你自己電腦上有，其他人電腦上沒(méi)有，然后你直接在css樣式里用了這個(gè)字體會(huì)有啥結(jié)果！

遇到這種情況最重要的是需要跟設(shè)計(jì)商議，替換成安全字體，例如：微軟雅黑、宋體、黑體、Arial等，假如設(shè)計(jì)死活不同意，講道理，再不同意，叫上產(chǎn)品經(jīng)理一起講這個(gè)問(wèn)題（具體可查看億企邦《基于頁(yè)面易讀性的文字編排設(shè)計(jì)要點(diǎn)》的相關(guān)介紹）。

13、流體布局（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。

14、流體圖片（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)整了。

15、媒體查詢（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)形式（具體可查看億企邦《如何改善網(wǎng)頁(yè)文字的閱讀體驗(yàn)》的相關(guā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)。

可以發(fā)現(xiàn)，在800px的分辨率設(shè)備中，我的基準(zhǔn)字號(hào)設(shè)置為33.34px，在720px的分辨率設(shè)備下的基準(zhǔn)字號(hào)為30px。

為什么在800px分辨率下基準(zhǔn)字號(hào)就為33.34px，在720px分辨率下基準(zhǔn)字號(hào)為30px呢，這是因?yàn)槲沂窍纫?80px分辨率下基準(zhǔn)字號(hào)為20px去實(shí)現(xiàn)的，那么在800px或720px下的基準(zhǔn)字號(hào)就根據(jù)設(shè)備分辨率的比例去算出。 這里只給出兩個(gè)分辨率的例子，其他不同分辨率下的實(shí)現(xiàn)方法一樣。

通過(guò)上面的幾點(diǎn)關(guān)鍵技術(shù)點(diǎn)，我們就可以實(shí)現(xiàn)具體的響應(yīng)式頁(yè)面了，看完這篇文章，是不是覺(jué)得響應(yīng)式頁(yè)面其實(shí)也沒(méi)有想象中那么難呢？那么，有空自己去試試吧，只有自己動(dòng)手實(shí)現(xiàn)后才能真正理解其中的奧秘哦！

億企邦點(diǎn)評(píng)：

單純的頁(yè)面重構(gòu)，所涉及到的工作內(nèi)容一般是“分析設(shè)計(jì)稿>切圖>寫(xiě)HTML和CSS”，雖然看起來(lái)很少，但要做好這份工作，絕非所想的那么容易。原因很簡(jiǎn)單：工作內(nèi)容單一，在時(shí)間和工作量上必會(huì)很苛刻，往往跟設(shè)計(jì)師的工作時(shí)間是3:1，即設(shè)計(jì)師給三天的時(shí)間，制作只給一天的時(shí)間完成。

在這種工作強(qiáng)度下，很多人都是靠著對(duì)這份工作的喜愛(ài)在維持著，一旦工作熱情消失，很容易就會(huì)變得枯燥，保持熱情也成了重構(gòu)工作者（也許是所有參加工作的人）應(yīng)該具備的能力。