現(xiàn)在移動(dòng)設(shè)備越來(lái)越多，使用手機(jī)上網(wǎng)的人也越來(lái)越多，移動(dòng)設(shè)備也成為訪問(wèn)互聯(lián)網(wǎng)的常見(jiàn)終端設(shè)置。以前我們?cè)诰帉?xiě)管理系統(tǒng)的時(shí)候，客戶(hù)端只需要考慮PC機(jī)桌面設(shè)備，現(xiàn)在則必須要考慮到移動(dòng)終端設(shè)備了。

移動(dòng)終端設(shè)備的屏幕分辨率很多都不一樣，手機(jī)就分很多種大小的，然后還有一些平板電腦，如ipad,ipad迷你，等等，大小很難統(tǒng)一， 瀏覽器也各式各樣，這使得做移動(dòng)設(shè)備的客戶(hù)端界面有了一定的困難，總不不能每種尺寸的都做上一遍。

于是很多電商公司做了3G版，觸摸屏版，普通版，電腦版等等。每種版本按大體的規(guī)則做了一遍。

手機(jī)的屏幕比較小，寬度通常是600像素以下。老式一些的手機(jī)用普通版，屏幕寬度300px以下，多以文字連接為主。手機(jī)帶觸摸屏的，屏幕要稍微大一些，操作界面又多以圖片觸摸為主。還有一些ipad等的屏幕就更大了，可以做更多內(nèi)容的展示。

電商網(wǎng)站主要靠這些終端設(shè)備來(lái)完成銷(xiāo)售，為了讓用戶(hù)使用各種設(shè)置都有良好的體驗(yàn)，促進(jìn)訂購(gòu)，電商公司不惜分開(kāi)做多個(gè)版本。

我們做企業(yè)管理軟件的，頁(yè)面展示的信息不是那么多時(shí)，可以將所有移動(dòng)設(shè)備的終端頁(yè)面做成標(biāo)準(zhǔn)的版本，就一套系統(tǒng)，然后根據(jù)屏幕的大小自適應(yīng)，以后維護(hù)也就這一套。

自適應(yīng)頁(yè)面的設(shè)計(jì)從開(kāi)始就有很多需要注意的：

1. ?頁(yè)面中關(guān)乎布局的元素都不設(shè)置絕對(duì)的寬和高，都按百分比來(lái)設(shè)置。

2.? 字體也使用相對(duì)大小的字體 ?

　　如：

???? ?body{font: normal 100%;} 字體大小事頁(yè)面默認(rèn)大小的100%，即16像素。 ???

??? ? h2 {font-size:1.5em} h2標(biāo)題的文字大小事默認(rèn)字體大小的1.1倍。

3.? 用div+css+浮動(dòng) 來(lái)布局 ?各個(gè)盒子的位置用浮動(dòng)的，不是固定不變的。???

??? 如：

???? .content{float:right;75%;} ??

??? ?.sidebar{float:left;width:20%;} ? ?

????? 用百分比 + 浮動(dòng)，當(dāng)屏幕太窄，放不下兩個(gè)盒子的時(shí)候，后面的元素會(huì)自動(dòng)移動(dòng)到前面元素的下方，不會(huì)使得頁(yè)面產(chǎn)生橫向的滾動(dòng)條。

4.? 盡量不要使用絕對(duì)定位，即position:absolute的定位。

5.? 根據(jù)瀏覽器的版本做一些css的處理

6.? 根據(jù)屏幕的寬度加載相應(yīng)的css文件 ?

??? ?如：

????? <link rel="stylesheet" type="text/css"??media="screen and (max-device-width: 400px)"??href="tinyScreen.css" /> ??????

???? ?屏幕寬度小于400像素，就加載tinyScree.css文件； ?????? ??

????? <link rel="stylesheet" type="text/css"??media="screen and (min-width: 400px) and (max-device-width: 600px)"??href="smallScreen.css" /> ????????

??? ?屏幕寬度在400像素 到 600像素之間，就加載smallScreen.css文件 ? ???

?????? @import url("tinyScreen.css") screen and (max-device-width: 400px);

????? ?在現(xiàn)有CSS文件中加載。

?7.? css文件中，根據(jù)分辨率設(shè)置不同的css風(fēng)格 ? ??　　

????? @media screen and (max-device-width: 400px) {

　　　　.column { ?　　　　　　float: none; ?　　　　　　width:auto; ?　　　　}

　　　　.sidebar { ?　　　　　　display:none; ?　　　　} 　　??

????? } ?????

???? 屏幕寬度小于400像素，則column塊取消浮動(dòng)（float:none）、寬度自動(dòng)調(diào)節(jié)（width:auto），sidebar塊不顯示（display:none）。 ????? ?????

??? ?@media screen and(min-width:400px){

????? ?.content {width:65%;}

????? ?.sidebar{ width:30%;} ?????

????? } ?????

???? 屏幕大于400像素，content占65%，sidebar占30%。 ? ?

8.?? 圖片自動(dòng)縮放，自適應(yīng)大小 ?

?? ?? 如：img{max-width:100%;} ???

9.?? 設(shè)置meta標(biāo)簽 ?

????? 如：<meta name="viewport" content="width=device-width, initial-scale=1.0"> ??

????? ?viewport meta標(biāo)簽告訴瀏覽器視口寬度等于設(shè)備屏幕寬度，且不進(jìn)行初始縮放。 ?

?

?

當(dāng)然程序員理想的狀態(tài)是做成一套，但往往事與愿違，我們至少需要做成PC機(jī)桌面設(shè)備一套，手機(jī)版觸摸屏的一套，ipad3G版一套。在這三種的系統(tǒng)中再做一些各自小范圍的自適應(yīng)。

總結(jié)

以上是生活随笔為你收集整理的自适应移动设备页面的设计的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。