rukki：隨著移動(dòng)端設(shè)備的猛漲，現(xiàn)在設(shè)計(jì)師們做網(wǎng)頁(yè)也要經(jīng)?？紤]如何適應(yīng)這些不同分辨率的屏幕了。今天@騰訊游戲TGideas?的Rukki與我們分享了關(guān)于自適應(yīng)不同分辨率界面的幾個(gè)技巧，非常實(shí)用，建議同學(xué)們學(xué)習(xí)一下 ：）

騰訊游戲的精品好文推薦：

《騰訊游戲：淺談?dòng)螒蚬倬W(wǎng)現(xiàn)狀及設(shè)計(jì)趨勢(shì)》
《四時(shí)充美：騰訊游戲404頁(yè)面小結(jié)》
《騰訊游戲：書寫體的繪制技法及應(yīng)用》

首先呢來(lái)看一張圖：

這是2個(gè)半月騰訊游戲官網(wǎng)的分辨率數(shù)據(jù)，可以看出來(lái)PC端里1024*768占20%、1920*1080占14%。而這2個(gè)分辨率的顯示寬度相差了接近一倍。
而現(xiàn)在設(shè)計(jì)師的設(shè)計(jì)稿普遍輸出尺寸都是1920，所以設(shè)計(jì)師經(jīng)常也會(huì)擔(dān)心：小分辨率下能看到嗎？或者需要為手機(jī)端單獨(dú)做一版嗎？所以我們需要用一些技巧來(lái)讓大多數(shù)用戶能看到的頁(yè)面效果是一樣的。

一、PC端

【舉例1】http://up.qq.com/2014/life/??1920*1080下顯示。

設(shè)計(jì)的很美觀 但是如果直接按原始大小做，小分辨率玩家只能看到中間的人物而已。

經(jīng)常我們做全flash站的時(shí)候，會(huì)看到多媒體的同學(xué)會(huì)為了配合多分辨率做展示上的自適應(yīng)。

而重構(gòu)其實(shí)純靠css也可以實(shí)現(xiàn)同樣的縮放自適應(yīng)：

這樣不會(huì)因?yàn)榉直媛市《荒芸吹街虚g一個(gè)區(qū)域，或者出現(xiàn)滾動(dòng)條影響體驗(yàn)。

實(shí)現(xiàn)思路：

1:?針對(duì)IE：IE有個(gè)zoom屬性。雖然經(jīng)常我們用它來(lái)清浮動(dòng)什么的。但是它在縮放元素上也是很強(qiáng)大的。eg：被設(shè)置zoom:0.5的元素會(huì)以該元素的左上角為原點(diǎn)在直接被縮小一半，所占據(jù)的文檔流內(nèi)體積也會(huì)減少一半（IE7和8+對(duì)zoom后的元素的margin值理解不同可以注意下，不過(guò)單純縮放元素時(shí)不太需要用到）。

firefox下呢，就可以使用css3的transform:scale()。（需要額外設(shè)置transform-origin:0 0為縮放原點(diǎn)）。

另外zoom也被webkit支持，scale還是zoom請(qǐng)自行選擇~

2. 接下來(lái)我們就可以按設(shè)計(jì)稿直接切成成一個(gè)巨大無(wú)比的1920*1000的頁(yè)面。

3. 然后獲取用戶的當(dāng)前窗口尺寸，eg當(dāng)前窗口寬1200，那么我們需要縮放的比例 zoom=1200/1920=0.625。然后把我們的主顯示的父框縮小0.625倍就可以啦~（當(dāng)然為了高度不出滾動(dòng)條，高度的尺寸也要納入計(jì)算范圍）

是不是很簡(jiǎn)單呢？以后遇到會(huì)影響內(nèi)容瀏覽的大頁(yè)面的時(shí)候 可以考慮用這種方法做一個(gè)縮放哦~

【舉例2】http://game.qq.com/happy/main.htm?（不好意思拿出了11年的頁(yè)面，不過(guò)這個(gè)思路看起來(lái)很清楚）

這個(gè)主體是固定尺寸的，然后通過(guò)js來(lái)計(jì)算定位和銜接背景做到自適應(yīng)&無(wú)滾動(dòng)條。可以看到跟上邊的例子比這些人物的尺寸都沒(méi)有改變。
計(jì)算思路神馬的因?yàn)橐郧白鲞^(guò)分享所以不再贅述~感興趣的同學(xué)可以查看代碼或者私下跟我討論^^

二、移動(dòng)端

移動(dòng)端雖然整體尺寸小+倒下去豎起來(lái)的尺寸差別太大，但是本質(zhì)和PC端頁(yè)面沒(méi)什么區(qū)別。

常見的自適應(yīng)自然就是：

1.?響應(yīng)式，media queries配合百分比讓頁(yè)面內(nèi)容自然的去適應(yīng)((http://game.qq.com)；

2.?根據(jù)瀏覽器尺寸然后進(jìn)行動(dòng)態(tài)的定位（http://up.qq.com/2014/await/）。?手機(jī)輸入網(wǎng)址瀏覽或掃描下排二維碼

如果單獨(dú)做手機(jī)端的頁(yè)面，用上述方法做自然正常顯示不是問(wèn)題，但是當(dāng)時(shí)間緊任務(wù)重或者資源不夠需要PC和手機(jī)使用同一套頁(yè)面時(shí)，如何適應(yīng)手機(jī)就是個(gè)需要考慮的問(wèn)題了。

我們先來(lái)看看例子：

http://up.qq.com/2014/user/user8.shtml

打開會(huì)發(fā)現(xiàn)這就是一個(gè)正常的PC端的活動(dòng)頁(yè)面，但是因?yàn)閺牟邉澋缴暇€的時(shí)間都非常緊沒(méi)有時(shí)間為手機(jī)版單獨(dú)做一套，所以就要考慮如何能適應(yīng)手機(jī)瀏覽了。

因?yàn)檫@個(gè)活動(dòng)系列其實(shí)是拉數(shù)據(jù)后趣味展示（其實(shí)就是定位圖片和文字在頁(yè)面上），所以定位和寬度用百分比進(jìn)行后很可能在顯示的時(shí)候出問(wèn)題；字體可能因?yàn)榉直媛市〉臅r(shí)候換行；甚至頁(yè)面的背景和高度在適應(yīng)多分辨率的手機(jī)時(shí)也不易控制等等等等（我糾結(jié)了一堆的憂慮）。

怎么辦？

咳~聰明的你一定想到了，嗯~就用我們PC端的第一個(gè)例子，縮放搞定！

安卓 & iPhone

iPhone & PC

同一套頁(yè)面，在一個(gè)小小的操作下便可以變成手機(jī)端可以瀏覽的了。

（因?yàn)槭荘C端的活動(dòng)所以調(diào)用的是PC的登錄&選大區(qū)組件，所以造成手機(jī)端操作有槽點(diǎn)，不過(guò)在本次分享里請(qǐng)先忽視它>_<！開發(fā)組件的多終端智能適配就是我接下來(lái)努力解決的一個(gè)點(diǎn)。）

結(jié)束語(yǔ)：

希望這個(gè)分享能給大家在不同分辨率下的顯示提供了思路。響應(yīng)式啦、百分比啦、動(dòng)態(tài)定位啦，或者縮放，在靈活配合后，相信可以為我們的頁(yè)面在比較不友好的分辨率下提供支持。

另外其實(shí)我不會(huì)寫結(jié)束語(yǔ)，所以就這樣吧^ ^！

原文地址：tgideas.qq
【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量67萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：