首先呢來看一張圖：
這是2個半月騰訊游戲官網(wǎng)的分辨率數(shù)據(jù)，可以看出來PC端里1024*768占20%、1920*1080占14%。而這2個分辨率的顯示寬度相差了接近一倍。
而現(xiàn)在設(shè)計師的設(shè)計稿普遍輸出尺寸都是1920，所以設(shè)計師經(jīng)常也會擔(dān)心：小分辨率下能看到嗎?或者需要為手機(jī)端單獨做一版嗎?所以我們需要用一些技巧來讓大多數(shù)用戶能看到的頁面效果是一樣的。
一、PC端
【舉例1】http://up.qq.com/2014/life/ 1920*1080下顯示。
設(shè)計的很美觀 但是如果直接按原始大小做，小分辨率玩家只能看到中間的人物而已。
經(jīng)常我們做全flash站的時候，會看到多媒體的同學(xué)會為了配合多分辨率做展示上的自適應(yīng)。
而重構(gòu)其實純靠css也可以實現(xiàn)同樣的縮放自適應(yīng)：
這樣不會因為分辨率小而只能看到中間一個區(qū)域，或者出現(xiàn)滾動條影響體驗。
實現(xiàn)思路：
1: 針對IE：IE有個zoom屬性。雖然經(jīng)常我們用它來清浮動什么的。但是它在縮放元素上也是很強(qiáng)大的。eg：被設(shè)置zoom:0.5的元素會以該元素的左上角為原點在直接被縮小一半，所占據(jù)的文檔流內(nèi)體積也會減少一半(IE7和8+對zoom后的元素的margin值理解不同可以注意下，不過單純縮放元素時不太需要用到)。
firefox下呢，就可以使用css3的transform:scale()。(需要額外設(shè)置transform-origin:0 0為縮放原點)。
另外zoom也被webkit支持，scale還是zoom請自行選擇~
2. 接下來我們就可以按設(shè)計稿直接切成成一個巨大無比的1920*1000的頁面。
3. 然后獲取用戶的當(dāng)前窗口尺寸，eg當(dāng)前窗口寬1200，那么我們需要縮放的比例 zoom=1200/1920=0.625。然后把我們的主顯示的父框縮小0.625倍就可以啦~(當(dāng)然為了高度不出滾動條，高度的尺寸也要納入計算范圍)
是不是很簡單呢?以后遇到會影響內(nèi)容瀏覽的大頁面的時候 可以考慮用這種方法做一個縮放哦~
【舉例2】http://game.qq.com/happy/main.htm (不好意思拿出了11年的頁面，不過這個思路看起來很清楚)
這個主體是固定尺寸的，然后通過js來計算定位和銜接背景做到自適應(yīng)&無滾動條。可以看到跟上邊的例子比這些人物的尺寸都沒有改變。
計算思路神馬的因為以前做過分享所以不再贅述~感興趣的同學(xué)可以查看代碼或者私下跟我討論^^
二、移動端
移動端雖然整體尺寸小+倒下去豎起來的尺寸差別太大，但是本質(zhì)和PC端頁面沒什么區(qū)別。
常見的自適應(yīng)自然就是：
1. 響應(yīng)式，media queries配合百分比讓頁面內(nèi)容自然的去適應(yīng)((http://game.qq.com);
2. 根據(jù)瀏覽器尺寸然后進(jìn)行動態(tài)的定位(http://up.qq.com/2014/await/)。 手機(jī)輸入網(wǎng)址瀏覽或掃描下排二維碼
如果單獨做手機(jī)端的頁面，用上述方法做自然正常顯示不是問題，但是當(dāng)時間緊任務(wù)重或者資源不夠需要PC和手機(jī)使用同一套頁面時，如何適應(yīng)手機(jī)就是個需要考慮的問題了。
我們先來看看例子：
http://up.qq.com/2014/user/user8.shtml
打開會發(fā)現(xiàn)這就是一個正常的PC端的活動頁面，但是因為從策劃到上線的時間都非常緊沒有時間為手機(jī)版單獨做一套，所以就要考慮如何能適應(yīng)手機(jī)瀏覽了。
因為這個活動系列其實是拉數(shù)據(jù)后趣味展示(其實就是定位圖片和文字在頁面上)，所以定位和寬度用百分比進(jìn)行后很可能在顯示的時候出問題;字體可能因為分辨率小的時候換行;甚至頁面的背景和高度在適應(yīng)多分辨率的手機(jī)時也不易控制等等等等(我糾結(jié)了一堆的憂慮)。
怎么辦?
咳~聰明的你一定想到了，嗯~就用我們PC端的第一個例子，縮放搞定!
安卓 & iPhone
iPhone & PC
同一套頁面，在一個小小的操作下便可以變成手機(jī)端可以瀏覽的了。
(因為是PC端的活動所以調(diào)用的是PC的登錄&選大區(qū)組件，所以造成手機(jī)端操作有槽點，不過在本次分享里請先忽視它>_