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