免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

關(guān)于響應(yīng)式頁(yè)面設(shè)計(jì)

2022-06-06    分類: 網(wǎng)站建設(shè)

作為一個(gè)無(wú)線部門的人,不懂移動(dòng)設(shè)備是不行的。而作為一個(gè)無(wú)線的重構(gòu),不會(huì)寫響應(yīng)式頁(yè)面更是不行得。而我,一個(gè)無(wú)線的重構(gòu),在我最近做的一個(gè)移動(dòng)端的項(xiàng)目之前,的確是不會(huì)寫響應(yīng)式頁(yè)面的,所以,嚴(yán)格來(lái)說(shuō),在這個(gè)項(xiàng)目之前,我是一個(gè)不合格的無(wú)線重構(gòu)人。

而這個(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、流體布局(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)。可以發(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ù),我們就可以實(shí)現(xiàn)具體的響應(yīng)式頁(yè)面了。看完這篇文章,是不是覺(jué)得響應(yīng)式頁(yè)面其實(shí)也沒(méi)有想象中那么難呢?那么,有空自己去試試吧,只有自己動(dòng)手實(shí)現(xiàn)后才能真正理解其中的奧秘哦!!!

當(dāng)前文章:關(guān)于響應(yīng)式頁(yè)面設(shè)計(jì)
轉(zhuǎn)載注明:http://m.newbst.com/news19/163919.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站營(yíng)銷網(wǎng)站改版小程序開(kāi)發(fā)自適應(yīng)網(wǎng)站品牌網(wǎng)站設(shè)計(jì)品牌網(wǎng)站制作

廣告

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

成都seo排名網(wǎng)站優(yōu)化