2022-06-06 分類: 網(wǎng)站建設(shè)
作為一個無線部門的人,不懂移動設(shè)備是不行的。而作為一個無線的重構(gòu),不會寫響應(yīng)式頁面更是不行得。而我,一個無線的重構(gòu),在我最近做的一個移動端的項目之前,的確是不會寫響應(yīng)式頁面的,所以,嚴格來說,在這個項目之前,我是一個不合格的無線重構(gòu)人。
而這個項目,卻讓我快速地掌握了響應(yīng)式頁面重構(gòu)的一些方法。下面就是通過這個項目來總結(jié)我在響應(yīng)式頁面重構(gòu)學到的東西。
眾所周知,所謂響應(yīng)式頁面,就是能夠用一套樣式,使你的頁面能夠在不同分辨率的屏幕下都有很好的表現(xiàn)形式。響應(yīng)式Web設(shè)計,這個概念是Ethan Marctte 在A List Apart 發(fā)表的一篇文章“Responsive Web Design”中援引響應(yīng)式建筑而得名:
響應(yīng)式建筑(responsive architecture),物理空間應(yīng)該可以根據(jù)存在于其中的人的情況進行相應(yīng)。
根據(jù)我所閱讀過一些文章及資料,我總結(jié)出響應(yīng)式頁面的幾個關(guān)鍵組成部分:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
第一種用百分比(%),就是以該元素的父容器的寬高為100%,其他元素的寬高相對于其父容器的比例,只要將具體的像素值相對于他的父容器的一個百分比折算即可。當然這種方法的換算有點復雜,因為很多相對的寬高折算的百分比系數(shù)是帶小數(shù)的,所以這時候可能要你有足夠的耐心才能實現(xiàn)。
在Ethan Marctte的Responsive Web Design這篇文章中給出的一個demo中,我們可以看到他的實際代碼里:
@media screen and (max-width: 400px) {
.figure,
li#f-mycroft {
margin-right: 3.317535545023696682%; /* 21px / 633px */
width: 48.341232227488151658%; /* 306px / 633px */ }
第二種方法是用字號比例(em)去實現(xiàn),其實方法是跟上面一樣的,只不過我們將%換成了em,這種方法就是某元素具體的寬高(px)在當前基準字號(font-size)下折算出多少個em。eg: 一個在480分辨率下寬高為64px*64px的元素,其父容器的字號(font-size)為20px,那么它折算成em為單位就是3.2em*3.2em。當其父容器字號基準根據(jù)不同的分辨率變化的時候,該元素的寬高也能根據(jù)這個字號基準成比例的縮放,就能實現(xiàn)響應(yīng)式變化。
從上面的兩張實例圖我們可以看到,同一個元素,寬高為3.2em*3.2em,在360px分辨率下,因為基準字號為15px,故解析出來的實際尺寸為48px*48px,而在480px分辨率下,基準字號為20px,故實際的尺寸為64px*64px。
@media screen and (max-device-width: 480px) {
.column {
float:none;
}
}
通過上面的這樣媒體查詢結(jié)構(gòu),我們可以設(shè)定在不同分辨率下選用不同的樣式來調(diào)整響應(yīng)式頁面。像前面第二點流體布局上,我們使用百分比或字號比例去實現(xiàn)流體布局的時候,第一種方法是可以不用媒體查詢直接實現(xiàn)流體布局的,就是元素的寬高能自適應(yīng)不同分辨率屏幕。
但第二種方法用字號比例(em)去實現(xiàn)流體布局的時候,我們就必須要結(jié)合媒體查詢了,因為我們的字號比例是根據(jù)基準字號來實現(xiàn)的,就是說在基準字號一定的情況下,該元素的大小就是固定的,而我們要實現(xiàn)該元素尺寸自適應(yīng),就只能通過調(diào)整基準字號來實現(xiàn)了。通過媒體查詢,我們可以讓在基準字號font-size在不同分辨率下不一樣,這樣其子元素相對于該字號的比例em算出來的像素px就不一樣了,這樣就能實現(xiàn)響應(yīng)式了。
所以我們兼容不同的分辨率的時候,可以先在某個分辨率下,實現(xiàn)好的重構(gòu),然后將所有元素具體的尺寸(px)折算為em(根據(jù)父容器的font-size),然后再通過媒體查詢,調(diào)整不同分辨率下的基準字號font-size就能實現(xiàn)具體的響應(yīng)式了。
當然媒體查詢的功能是根據(jù)不同的分辨率適配不同的樣式,我們可以通過上面的做法是實現(xiàn)流體布局,還可以通過媒體查詢來細調(diào)具體的頁面在不同分辨率下的不同表現(xiàn)形式。
在我具體的項目過程中,采用媒體查詢主要是調(dià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è)置通用字號為20px,當分辨率超過我媒體查詢到的大屏幕寬度的時候就適配該基準字號,下面分別通過媒體查詢?yōu)榉直媛蕿?00px和720px的設(shè)備詳細調(diào)整基準字號,(當然在這里你可以增加更多的樣式去調(diào)整不同分辨率下的具體表現(xiàn))使頁面在兩個分辨率下都能有比較好的表現(xiàn)??梢园l(fā)現(xiàn),在800px的分辨率設(shè)備中,我的基準字號設(shè)置為33.34px,在720px的分辨率設(shè)備下的基準字號為30px。
為什么在800px分辨率下基準字號就為33.34px,在720px分辨率下基準字號為30px呢,這是因為我是先以480px分辨率下基準字號為20px去實現(xiàn)的,那么在800px或720px下的基準字號就根據(jù)設(shè)備分辨率的比例去算出。 這里只給出兩個分辨率的例子,其他不同分辨率下的實現(xiàn)方法一樣。
通過上面的幾點關(guān)鍵技術(shù),我們就可以實現(xiàn)具體的響應(yīng)式頁面了??赐赀@篇文章,是不是覺得響應(yīng)式頁面其實也沒有想象中那么難呢?那么,有空自己去試試吧,只有自己動手實現(xiàn)后才能真正理解其中的奧秘哦?。?!
當前文章:關(guān)于響應(yīng)式頁面設(shè)計
轉(zhuǎn)載注明:http://m.rwnh.cn/news19/163919.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站營銷、網(wǎng)站改版、小程序開發(fā)、自適應(yīng)網(wǎng)站、品牌網(wǎng)站設(shè)計、品牌網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容