2023-12-08 分類(lèi): 網(wǎng)站建設(shè)
隨著各種特性和智能手機(jī)瀏覽器的發(fā)展,網(wǎng)頁(yè)能夠根據(jù)設(shè)備顯示變得很重要。我們不用再根據(jù)桌面瀏覽器窗口尺寸建立網(wǎng)站,然后讓它們?cè)诟〉囊苿?dòng)瀏覽器上渲染。現(xiàn)在,我們可以讓元素大小和布局針對(duì)設(shè)備作出改變。
在Css2中,我們可以通過(guò)特殊的CSS后綴實(shí)現(xiàn)不同的媒體類(lèi)型,比如印刷、演講和屏幕顯示。默認(rèn)情況下,網(wǎng)頁(yè)即為屏幕顯示。另外一個(gè)比較有用且流行的媒體類(lèi)型是印刷,它為優(yōu)質(zhì)的網(wǎng)面打印創(chuàng)建一個(gè)分離的設(shè)計(jì)。我們可以告訴瀏覽器僅僅在打印時(shí)使用CSS規(guī)則。
當(dāng)從瀏覽器轉(zhuǎn)到打印機(jī)的時(shí)候,這里有一些可以?xún)?yōu)化的地方,以保證輸出具有更佳品質(zhì)的內(nèi)容:
1、移除背景圖像;
2、移除主要的導(dǎo)航鏈接;
3、重建頭部和頁(yè)腳,使其更加合理;
4、將文本和鏈接改為黑色和白色;
5、將字體大小設(shè)置為打印的基礎(chǔ)單位,例如12px;
6、加粗文字中的鏈接;
7、通過(guò)content屬性自動(dòng)打印URLa:link:after{content:"("attr(href)")";}
8、將內(nèi)容區(qū)域進(jìn)行擴(kuò)展,使其充分利用打印頁(yè)面。
適應(yīng)媒體查詢(xún)
CSS3 擴(kuò)展了媒體類(lèi)型的概念以檢查特定的屏幕尺寸,所以樣式表在做一個(gè)設(shè)計(jì)時(shí)可以更精確。例如,為了將一組CSS 規(guī)則應(yīng)用到小屏幕的移動(dòng)設(shè)備上,使用@media 規(guī)則設(shè)置那些CSS 聲明,從而設(shè)置兩個(gè)屏幕交付與視口大小:
通過(guò)這種方法,只有在視口或?yàn)g覽器窗口至少為480 像素時(shí),我們才可以告訴瀏覽器應(yīng)用CSS規(guī)則。
為多種類(lèi)型的屏幕(從移動(dòng)設(shè)備的屏幕到桌面計(jì)算機(jī)的屏幕)設(shè)置樣式:
這便可以為不同視口應(yīng)用相同的設(shè)計(jì),如圖12.24讓你示。
自適應(yīng)和響應(yīng)式的不同之處在網(wǎng)頁(yè)設(shè)計(jì)中,自適應(yīng)和響應(yīng)式有著很明顯的區(qū)別。自適應(yīng)傾向于針對(duì)不同的斷點(diǎn)產(chǎn)生特定的、定制的設(shè)計(jì)。這些視圖常常是適應(yīng)像桌面、平板電腦和移動(dòng)設(shè)備這樣大的物體。
流式布局
我們?cè)谶@一章的前面部分創(chuàng)建兩欄和三欄布局的時(shí)候,創(chuàng)建了固定和流式兩個(gè)版本?,F(xiàn)在,我們可以進(jìn)一步看到在處理響應(yīng)式設(shè)計(jì)時(shí)的不同以及流式布局的優(yōu)點(diǎn)。
盡管斷點(diǎn)可以讓我們將設(shè)計(jì)適應(yīng)當(dāng)前常用的視口寬度。通過(guò)為元素設(shè)置成比例的寬度,它們就可以根據(jù)渲染時(shí)視口的寬度進(jìn)行浮動(dòng)。
因?yàn)橐粋€(gè)新媒體通常是被之前媒體的元素所限制的,所以設(shè)計(jì)網(wǎng)頁(yè)的印刷設(shè)計(jì)人員將印刷項(xiàng)目中固定設(shè)置和精確布局的想法帶到了網(wǎng)頁(yè)設(shè)計(jì)中。
div.container{margin:0 auto; width:960px;} div.main{width:600px;float:left;} div.aside{width:300px;float:right;}
效果如下圖:
寬度通常都是以像素為單位,用于定義包含元素的寬度。為了將已經(jīng)存在的設(shè)計(jì)轉(zhuǎn)變?yōu)楦?dòng)的,我們可以使用基本的數(shù)學(xué)公式——除法。例如,在固定寬度的設(shè)計(jì)中,主要欄的寬度只需要除以容器或者上下文的寬度:
600px ÷ 960px = 0.625
接著將結(jié)果轉(zhuǎn)換成百分比:
0.625 × 100 = 62.5%
為什么是百分比?這是因?yàn)楸M管像素是一個(gè)絕對(duì)單位,但是百分比是一個(gè)相對(duì)單位。當(dāng)瀏覽器窗口擴(kuò)大時(shí),這個(gè)欄的寬度也會(huì)擴(kuò)大,如圖12.26 所示。現(xiàn)在,新布局的結(jié)果建立在流式輸出上。
div.container {
margin: 0 auto;
width: 100%;
}
div.main {
width: 62.5%;
float: left;
}
div.aside {
width: 31.25%;
float: right;
}
-------------------------------------------
數(shù)學(xué)運(yùn)算
除法運(yùn)算中的第一個(gè)參數(shù)叫作除數(shù),它被所謂的被除數(shù)除,所得結(jié)果叫作商。如果除法不是你的強(qiáng)項(xiàng),我們周?chē)懈鞣N計(jì)算器可以利用。PC、Mac、智能手機(jī),甚至網(wǎng)頁(yè)上都有。
-------------------------------------------
接下來(lái),就要用指定的樣式來(lái)包裹媒體規(guī)則:
@media screen and (min-width:910px){
div.container{margin:0 auto; width:100%;}
div.main{width:62.5%; float:left;}
div.aside{width:31.25%;float:right;}
}
然后重復(fù)每一個(gè)你想支持的斷點(diǎn)。
文本回流
文本可以輕而易舉地回流到新的容器中。當(dāng)欄擴(kuò)展時(shí),每一行的長(zhǎng)度也會(huì)發(fā)生改變,所有欄看起來(lái)都是合適的(無(wú)論大小還是寬度)。當(dāng)文本改變以填補(bǔ)一個(gè)靈活的容器時(shí),不需要擔(dān)心文本的拉伸、變形或者變得不優(yōu)雅。如圖12.27 所示,相同數(shù)目的文字在不同的欄中展示了不同的長(zhǎng)度和高度。
最優(yōu)的行長(zhǎng)度
關(guān)于每行放置多少個(gè)字符才是最合適,這個(gè)討論一直沒(méi)有答案,66 個(gè)字符也許是最值得參考的。這里有一個(gè)簡(jiǎn)單的測(cè)試:每45 和75 個(gè)字符放置一個(gè)特殊符號(hào),如“^”。只要每行只有一個(gè)符號(hào),那么這個(gè)長(zhǎng)度就比較合適。
媒體查詢(xún)實(shí)戰(zhàn)
為了了解媒體查詢(xún)的作用,我們創(chuàng)建一個(gè)簡(jiǎn)單的布局,使其可以適應(yīng)桌面計(jì)算機(jī)和智能手機(jī)。盡管有許多種方法可以創(chuàng)建響應(yīng)式布局,但是直接的方法還是在桌面版本中創(chuàng)建一個(gè)流式網(wǎng)格,然后盡可能少地修改CSS,使其適應(yīng)移動(dòng)設(shè)備的瀏覽器。
這個(gè)布局中的基本要素包括頭部、導(dǎo)航菜單、主要的內(nèi)容區(qū)域和側(cè)邊欄。另外我們還會(huì)插入一幅圖像。
現(xiàn)在,讓我們給網(wǎng)站創(chuàng)建桌面版本的CSS。下面的代碼片段只展示了這個(gè)網(wǎng)站針對(duì)布局的相關(guān)CSS。
現(xiàn)在,我們創(chuàng)建了一個(gè)水平的導(dǎo)航欄和一個(gè)流動(dòng)的兩欄布局。內(nèi)容中的圖像浮動(dòng)到右邊。我們同時(shí)指定了這個(gè)布局中不存在的一些東西,比如列表項(xiàng)的頂部邊框。這是為了確保我們的常規(guī)布局不會(huì)從我們后面要做的手機(jī)版本里繼承樣式——你將會(huì)看到我們是如何解釋手機(jī)布局的CSS 的。在我們的桌面版本中,網(wǎng)頁(yè)如圖12.28所示。
桌面計(jì)算機(jī)應(yīng)用響應(yīng)式布局會(huì)產(chǎn)生大量的屏幕空白
這個(gè)布局對(duì)桌面端非常友好,它有更大的屏幕使用面積。但是對(duì)于移動(dòng)端設(shè)備,擠壓水平導(dǎo)航菜單和320像素中的兩欄會(huì)導(dǎo)致網(wǎng)站非常難閱讀。所以我們不得不通過(guò)下面的步驟來(lái)改變它在移動(dòng)設(shè)備中的布局。
將水平導(dǎo)航菜單變成垂直的,尤其是點(diǎn)擊區(qū)域或者按鈕足夠大,這對(duì)手指觸控是有益的。
將兩欄布局改為一欄:將側(cè)邊欄放到主要內(nèi)容區(qū)域下面。
?在移動(dòng)瀏覽器的窗口中,圖像由于太大而不能浮動(dòng),無(wú)法自適應(yīng)和水平對(duì)齊,我們必須調(diào)整它。
首先,我們?cè)贖TML 頁(yè)面的頭部區(qū)域中加入下面一行:
這是為什么?這行代碼的目的是調(diào)整iPhone,使其重新縮放我們的網(wǎng)頁(yè)。當(dāng)展示網(wǎng)頁(yè)的時(shí)候,iPhone(帶著很好的想法)會(huì)“縮小”網(wǎng)站,因此,桌面計(jì)算機(jī)的頁(yè)面設(shè)計(jì)可以適應(yīng)iPhone 的小屏幕。盡管這對(duì)于不適應(yīng)移動(dòng)設(shè)備的網(wǎng)頁(yè)來(lái)說(shuō)非常好,但是我們不想iPhone 縮小頁(yè)面元素!所以這一行重設(shè)頁(yè)面元素到實(shí)際的大小。
1.創(chuàng)建媒體查詢(xún)
接下來(lái),我們需要在樣式表中創(chuàng)建媒體查詢(xún)。這下可復(fù)雜了,因?yàn)橐苿?dòng)設(shè)備豐富多樣,屏幕大小和分辨率各不相同。我們需要給幾個(gè)常見(jiàn)的移動(dòng)設(shè)備寫(xiě)單獨(dú)的媒體查詢(xún),但是最簡(jiǎn)單的方法還是創(chuàng)建一個(gè)媒體查詢(xún),它可以囊括幾乎所有的智能手機(jī),然后使布局靈活地適應(yīng)它們。所以我們現(xiàn)在要做的是讓媒體查詢(xún)匹配設(shè)備大的480 像素寬,這基本可以適應(yīng)大部分的智能手機(jī)的橫向和縱向模式(注意,這里不包括平板設(shè)備,比如iPad。我們會(huì)為這些設(shè)備創(chuàng)建一個(gè)獨(dú)立的媒體查詢(xún)。為了簡(jiǎn)便,在這個(gè)例子中我們只討論智能手機(jī))。
所以,讓我們創(chuàng)建自己的媒體查詢(xún)。你會(huì)想把這部分的CSS 放到常規(guī)布局的下面。
首先,我們要去掉導(dǎo)航區(qū)域頂部和底部的邊框和內(nèi)邊距。此外,我們需要將水平的“條”變成垂直系列的“按鈕”。對(duì)于導(dǎo)航條列表項(xiàng),我們?cè)趯?dǎo)航按鈕上添加頂部的邊框(和水平條的樣式一致)。同時(shí)我們將浮動(dòng)屬性設(shè)置為none,因?yàn)樵谶@里我們想使一個(gè)按鈕低于另一個(gè),而不是讓它們水平相鄰。我們需要添加一些內(nèi)邊距來(lái)讓它們更“肥”一些。最后,對(duì)于列表本身,當(dāng)它是水平條的時(shí)候,要為它添加一個(gè)下邊框并且稍微調(diào)整它的定位。正如你所見(jiàn)到的,我們并不想在常規(guī)的布局中添加這些東西(如上邊框,等等),這也是為什么我們將其從默認(rèn)的CSS 中“提前移走”。當(dāng)創(chuàng)建有媒體查詢(xún)的布局時(shí),注意你的樣式層疊和跟蹤哪些樣式可能被繼承是非常重要的。
現(xiàn)在,開(kāi)始操作兩欄。我們希望兩欄可以在垂直方向上重疊,并希望每欄都能充分利用手機(jī)的屏幕寬度。
#content {
width: 100%;
}
#sidebar {
width: 100%;
clear: both;
}
就這么簡(jiǎn)單?注意,我們要保持原有布局的流動(dòng)。雖然我們已經(jīng)針對(duì)了一部分智能手機(jī),但是我們不想將欄的寬度設(shè)置為一個(gè)特定值;我們想要這個(gè)布局適應(yīng)無(wú)數(shù)的設(shè)備寬度。所以,我們必須將寬度調(diào)整到100%。同時(shí),通過(guò)在側(cè)邊欄上設(shè)置clear 來(lái)清除浮動(dòng)。最后,對(duì)圖像設(shè)置樣式:
img {
margin: 0 0 10px 0;
max-width: 100%;
}
除了在我們圖像的底部設(shè)置一個(gè)小的下邊距之外,唯一值得注意的是, 我們必須將max-width 設(shè)置為100%。這樣圖像的大小就不會(huì)超過(guò)設(shè)備屏幕的寬度,從而避免了用戶(hù)屏查看整張圖像。現(xiàn)在,讓我們來(lái)看看頁(yè)面在iPhone 上是如何顯示的(見(jiàn)圖12.29)。現(xiàn)在,我們的頁(yè)面在手機(jī)瀏覽器上易于閱讀,并且導(dǎo)航菜單可以輕松地通過(guò)大拇指或者其他手指進(jìn)行操作。
移動(dòng)設(shè)備中的響應(yīng)式布局
2.自定義媒體查詢(xún)
我們著眼于設(shè)計(jì)一個(gè)可替代的設(shè)計(jì),它可以在智能手機(jī)上表現(xiàn)良好,同時(shí)在桌面計(jì)算機(jī)上也可以。隨著智能手機(jī)和平板電腦的普及,這兩種設(shè)計(jì)無(wú)法適應(yīng)大多數(shù)主流設(shè)備。所以,我們需要提供各種媒體查詢(xún),以適應(yīng)網(wǎng)站設(shè)計(jì)的不同偏好。
多產(chǎn)的網(wǎng)頁(yè)設(shè)計(jì)師Chris Coyier 有一個(gè)關(guān)于多種設(shè)備的媒體查詢(xún)的參考列表(http://css-tricks.com/snippets/css/media-queries-forstandard-devices/):
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (full and mini; portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 and 5 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)
{
/* Styles */
}
雖然這是一個(gè)相當(dāng)全面的設(shè)備列表,但是也意味著一個(gè)網(wǎng)站要支持許多不同的風(fēng)格。因此,最好不要采用這種支持流行每一種類(lèi)型的設(shè)備的方法,這樣會(huì)讓你的網(wǎng)站針對(duì)每一種設(shè)備無(wú)限地更新。事實(shí)上,Chris Coyier 的方法基于一個(gè)古老的童話(huà)故事:金發(fā)姑娘和三只熊(http://css-tricks.com/media-queries-sass-3-2-and-codekit/)。
與提供多個(gè)版本的網(wǎng)站不同,Coyier 發(fā)布了3 個(gè)版本。
Papa Bear——針對(duì)屏幕寬度超過(guò) 1 600 px的網(wǎng)站。
Mama Bear——針對(duì)屏幕寬度為 650 px到 1 600 px的網(wǎng)站。
Baby Bear——針對(duì)屏幕寬度在 650 px以上的網(wǎng)站。
這種方式的媒體查詢(xún)應(yīng)該像下面這樣:
@media only screen and (max-width: 1 600 px) {
... /* papa bear size */
}
@media (max-width: 1250px) {
... /* mama bear size */
}
@media (max-width: 650px) {
... /* baby bear size */
}
當(dāng)然,如果你覺(jué)得有需要(或你的客戶(hù)需要它們時(shí)),可以添加設(shè)備指定的媒體查詢(xún)。但你關(guān)注的重點(diǎn)是,測(cè)試你的設(shè)計(jì)在不同設(shè)備下的樣式,看看能否在某些寬度掩蓋或收起。
響應(yīng)式框架
如果你想使用一個(gè)可以快速建立并運(yùn)行的框架,但也要具有響應(yīng)式設(shè)計(jì)的靈活性,可以看看https://cdcxhl.com。
雖然它們有一個(gè)JavaScript 提供媒體查詢(xún)(表面上老版瀏覽器不處理動(dòng)態(tài)樣式表轉(zhuǎn)換),但是你可以下載多種樣式表和所有相關(guān)的CSS 規(guī)則來(lái)控制框架。
額外的樣式表可供下載。
mobile.css——針對(duì)屏幕大小低于760 px的網(wǎng)站設(shè)計(jì)。
?720.css——針對(duì)屏幕大小為760 px到 980 px的網(wǎng)站設(shè)計(jì)。
?960.css——針對(duì)屏幕大小為980 px到 1 280 px的網(wǎng)站設(shè)計(jì)。
1200.css——針對(duì)屏幕大小為1 280 px到 1 600 px的網(wǎng)站設(shè)計(jì)。
?1560.css——針對(duì)屏幕大小為1 600 px到 1 940 px的網(wǎng)站設(shè)計(jì)。
?1920.css——針對(duì)屏幕大小為1 940 px到 2 540 px的網(wǎng)站設(shè)計(jì)。
?2520.css——針對(duì)屏幕大小高于 2 540 px的網(wǎng)站設(shè)計(jì)。
本文題目:移動(dòng)端自適應(yīng)顯示網(wǎng)站,手機(jī)響應(yīng)式網(wǎng)站建設(shè)
網(wǎng)頁(yè)鏈接:http://m.rwnh.cn/news29/307629.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站維護(hù)、手機(jī)網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、建站公司、網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容