 |
| 昵稱：奈薇建站網(wǎng) |
| 論壇積分：108000 |
| 發(fā)貼等級：21 |
    
    |
| 發(fā)貼數(shù)：1156 |
| 回貼數(shù)：1282 |
被砸雞蛋： 1 |
獲贈鮮花： 182 |
|
 |
|
|
發(fā)表時間：2015/11/2 23:40:00 |
樓 主 |
|
 |
|
 |
|
【轉(zhuǎn)】手機網(wǎng)頁設(shè)計注意事項和解決方法-2
手機網(wǎng)頁設(shè)計注意事項和解決方法_02
1.?Iphone手機網(wǎng)頁設(shè)計1.1設(shè)置viewpoint，固定顯示頁面
當(dāng)我們在Safari中打開一個網(wǎng)站時，默認情況下會縮放顯示網(wǎng)頁，而這會影響WebApp的體驗，所以通過以下代碼來關(guān)閉縮放：
<metaname=?“viewport”content=?“user-scalable=no,width=device-width”>
屬性的介紹：
user-scalable–?用戶是否可以手動縮放；width–?定義viewport寬度(默認為980像素)?，例子中值為device-width是指設(shè)置為設(shè)備顯示寬度；height–viewport的高度；initial-scale–?初始的縮放比例?(范圍從0到10)；minimum-scale–?允許用戶縮放到的最小比例；maximum-scale–?允許用戶縮放到的最大比例；
1.2允許網(wǎng)頁寬度自動調(diào)整
"自適應(yīng)網(wǎng)頁設(shè)計"到底是怎么做到的？其實并不難。
首先，在網(wǎng)頁代碼的頭部，加入一行?viewport元標(biāo)簽。
<metaname="viewport"content="width=device-width,initial-scale=1"?/>
viewport是網(wǎng)頁默認的寬度和高度，上面這行代碼的意思是，網(wǎng)頁寬度默認等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網(wǎng)頁初始大小占屏幕面積的?100%。
所有主流瀏覽器都支持這個設(shè)置，包括?IE9。對于那些老式瀏覽器（主要是?IE6、7、8），需要使用css3-mediaqueries.js。
1.3不使用絕對寬度
由于網(wǎng)頁會根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。
具體說，CSS代碼不能指定像素寬度：
width:xxxpx;
只能指定百分比寬度：
width:xx%;
或者
width:auto;
1.4相對大小的字體
字體也不能使用絕對大?。╬x），而只能使用相對大?。╡m）。
body{
font:normal100%Helvetica,Arial,sans-serif;
}
上面的代碼指定，字體大小是頁面默認大小的?100%，即?16像素。
h1{
font-size:1.5em;
}
然后，h1的大小是默認大小的1.5倍，即?24像素（24/16=1.5）。
small{
font-size:0.875em;
}
small元素的大小是默認大小的0.875倍，即?14像素（14/16=0.875）。
1.5流動布局（fluidgrid）
"流動布局"的含義是，各個區(qū)塊的位置都是浮動的，不是固定不變的。
.main{
float:right;
width:70%;
}
.leftBar{
float:left;
width:25%;
}
float的好處是，如果寬度太小，放不下兩個元素，后面的元素會自動滾動到前面元素的下方，不會在水平方向?overflow（溢出），避免了水平滾動條的出現(xiàn)。
另外，絕對定位（position:absolute）的使用，也要非常小心。
1.6選擇加載?CSS
"自適應(yīng)網(wǎng)頁設(shè)計"的核心，就是?CSS3引入的?MediaQuery模塊。
它的意思就是，自動探測屏幕寬度，然后加載相應(yīng)的?CSS文件。
<linkrel="stylesheet"type="text/css"
media="screenand(max-device-width:400px)"
href="tinyScreen.css"?/>
上面的代碼意思是，如果屏幕寬度小于?400像素（max-device-width:400px），就加載?tinyScreen.css文件。
<linkrel="stylesheet"type="text/css"
media="screenand(min-width:400px)and(max-device-width:600px)"
href="smallScreen.css"?/>
如果屏幕寬度在?400像素到?600像素之間，則加載?smallScreen.css文件。
除了用?html標(biāo)簽加載?CSS文件，還可以在現(xiàn)有?CSS文件中加載。
@importurl("tinyScreen.css")screenand(max-device-width:400px);
1.7CSS的@media?規(guī)則
同一個?CSS文件中，也可以根據(jù)不同的屏幕分辨率，選擇應(yīng)用不同的?CSS規(guī)則。
@mediascreenand(max-device-width:400px)?{
.column{
float:none;
width:auto;
}
#sidebar{
display:none;
}
}
上面的代碼意思是，如果屏幕寬度小于?400像素，則?column塊取消浮動（float:none）、寬度自動調(diào)節(jié)（width:auto），sidebar塊不顯示（display:none）。
1.8圖片的自適應(yīng)（fluidimage）
除了布局和文本，"自適應(yīng)網(wǎng)頁設(shè)計"還必須實現(xiàn)圖片的自動縮放。
這只要一行?CSS代碼：
img{max-width:100%;}
這行代碼對于大多數(shù)嵌入網(wǎng)頁的視頻也有效，所以可以寫成：
img,object{max-width:100%;}
老版本的?IE不支持?max-width，所以只好寫成：
img{width:100%;?}
此外，windows平臺縮放圖片時，可能出現(xiàn)圖像失真現(xiàn)象。這時，可以嘗試使用?IE的專有命令：
img{?-ms-interpolation-mode:bicubic;?}
或者，EthanMarcotte的?imgSizer.js。
addLoadEvent(function?()?{
varimgs=document.getElementById("content")?.getElementsByTagName?("img");
imgSizer.collate(imgs);
});
不過，有條件的話，最好還是根據(jù)不同大小的屏幕，加載不同分辨率的圖片。有很多方法可以做到這一條，服務(wù)器端和客戶端都可以實現(xiàn)
2.?小屏幕移動設(shè)備網(wǎng)頁設(shè)計的相關(guān)補充：
1.1網(wǎng)站頭(header)
考慮到小屏幕移動設(shè)備的一些特性，設(shè)計網(wǎng)頁時，有些可以去掉網(wǎng)站頭（包括LOGO、全局導(dǎo)航什么的）。
比如flick的查看大圖頁面就去掉了網(wǎng)站頭。
設(shè)計原則：“針對于小屏幕移動設(shè)備的界面設(shè)計，在某些指定任務(wù) |
|
 |
 |
 |
|
奈薇建站網(wǎng)致力于，讓每個中國人、每個中國企業(yè)都擁有自己的“官方網(wǎng)站”！ |
|
|
|
|
|