這(zhè)是2個半月騰訊遊戲官網的分辨率數據，可以看出來PC端裡(lǐ)1024*768占20%、1920*1080占14%。而這(zhè)2個分辨率的顯示寬度相差了接近一倍。
而現在設計師的設計稿普遍輸出尺寸都(dōu)是1920，所以設計師經(jīng)常也會擔心：小分辨率下能(néng)看到嗎？或者需要爲手機端單獨做一版嗎？所以先誠科技需要用一些技巧來讓大多數用戶能(néng)看到的頁面(miàn)效果是一樣(yàng)的。
一、PC端

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

經(jīng)常先誠科技做全flash站的時候，會看到多媒體的同學(xué)會爲了配合多分辨率做展示上的自适應。

而重構其實純靠css也可以實現同樣(yàng)的縮放自适應：

這(zhè)樣(yàng)不會因爲分辨率小而隻能(néng)看到中間一個區域，或者出現滾動條影響體驗。
實現思路：

1: 針對(duì)IE：IE有個zoom屬性。雖然經(jīng)常先誠科技用它來清浮動什麼(me)的。但是它在縮放元素上也是很強大的。eg：被(bèi)設置zoom:0.5的元素會以該元素的左上角爲原點在直接被(bèi)縮小一半，所占據的文檔流内體積也會減少一半（IE7和8+對(duì)zoom後(hòu)的元素的margin值理解不同可以注意下，不過(guò)單純縮放元素時不太需要用到）。

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

另外zoom也被(bèi)webkit支持，scale還(hái)是zoom請自行選擇~

2. 接下來先誠科技就可以按設計稿直接切成(chéng)成(chéng)一個巨大無比的1920*1000的頁面(miàn)。

3. 然後(hòu)獲取用戶的當前窗口尺寸，eg當前窗口寬1200，那麼(me)先誠科技需要縮放的比例 zoom=1200/1920=0.625。然後(hòu)把先誠科技的主顯示的父框縮小0.625倍就可以啦~（當然爲了高度不出滾動條，高度的尺寸也要納入計算範圍）

是不是很簡單呢？以後(hòu)遇到會影響内容浏覽的大頁面(miàn)的時候 可以考慮用這(zhè)種(zhǒng)方法做一個縮放哦~
這(zhè)個主體是固定尺寸的，然後(hòu)通過(guò)js來計算定位和銜接背景做到自适應&無滾動條。可以看到跟上邊的例子比這(zhè)些人物的尺寸都(dōu)沒(méi)有改變。
計算思路神馬的因爲以前做過(guò)分享所以不再贅述~感興趣的同學(xué)可以查看代碼或者私下跟我讨論^^
二、移動端

移動端雖然整體尺寸小+倒下去豎起(qǐ)來的尺寸差别太大，但是本質和PC端頁面(miàn)沒(méi)什麼(me)區别。

常見的自适應自然就是：

1. 響應式，media queries配合百分比讓頁面(miàn)内容自然的去适應((http://game.qq.com)；

2. 根據浏覽器尺寸然後(hòu)進(jìn)行動态的定位（http://up.qq.com/2014/await/）。 手機輸入網址浏覽或掃描下排二維碼

如果單獨做手機端的頁面(miàn)，用上述方法做自然正常顯示不是問題，但是當時間緊任務重或者資源不夠需要PC和手機使用同一套頁面(miàn)時，如何适應手機就是個需要考慮的問題了。

打開(kāi)會發(fā)現這(zhè)就是一個正常的PC端的活動頁面(miàn)，但是因爲從策劃到上線的時間都(dōu)非常緊沒(méi)有時間爲手機版單獨做一套，所以就要考慮如何能(néng)适應手機浏覽了。

因爲這(zhè)個活動系列其實是拉數據後(hòu)趣味展示（其實就是定位圖片和文字在頁面(miàn)上），所以定位和寬度用百分比進(jìn)行後(hòu)很可能(néng)在顯示的時候出問題；字體可能(néng)因爲分辨率小的時候換行；甚至頁面(miàn)的背景和高度在适應多分辨率的手機時也不易控制等等等等（我糾結了一堆的憂慮）。

怎麼(me)辦？

咳~聰明的您一定想到了，嗯~就用先誠科技PC端的第一個例子，縮放搞定！
同一套頁面(miàn)，在一個小小的操作下便可以變成(chéng)手機端可以浏覽的了。

（因爲是PC端的活動所以調用的是PC的登錄&選大區組件，所以造成(chéng)手機端操作有槽點，不過(guò)在本次分享裡(lǐ)請先忽視它>_<！開(kāi)發(fā)組件的多終端智能(néng)适配就是我接下來努力解決的一個點。）
結束語：

希望這(zhè)個分享能(néng)給大家在不同分辨率下的顯示提供了思路。響應式啦、百分比啦、動态定位啦，或者縮放，在靈活配合後(hòu)，相信可以爲先誠科技的頁面(miàn)在比較不友好(hǎo)的分辨率下提供支持。

另外其實我不會寫結束語，所以就這(zhè)樣(yàng)吧^ ^！