這(zhè)是(shì)2個(gè)半月(yuè)騰訊遊戲官₩>π網的(de)分(fēn)辨率數(shù)據，可σ™€(kě)以看(kàn)出來(lái)PC端裡(lǐ)1024*768®∑ε✔占20%、1920*1080占14%。而這(zhè)2個(gè)分(fēn)辨"♥±率的(de)顯示寬度相(xiàng)差了(le)接近(jìn)一(yī)倍。
而現(xiàn)在設計(jì)師(shī)的(de)設✔&計(jì)稿普遍輸出尺寸都(dōu)是(shì)1920 ≈，所以設計(jì)師(shī)經常也(yě)會(hε​uì)擔心：小(xiǎo)分(fēn)辨率下(™∏€↕xià)能(néng)看(kàn)到(dào)嗎(ma)？或者需要(yào)為(wèi)手機(Ωσ∞jī)端單獨做(zuò)一(yī)版嗎(ma)？所以先誠科(kē)技(jì)需要(yào)用≤★(yòng)一(yī)些(xiē)技(jì)巧來(lái)讓大‍✔(dà)多(duō)數(shù)用(yòng)戶能(néng)看(kàn)到(dào)的≤‌™(de)頁面效果是(shì)一(yī)樣的(de)σ ∏→。
一(yī)、PC端

設計(jì)的(de)很(hěn)美(měi)觀×>δ" 但(dàn)是(shì)如(rú)果直接按原始大"★♦(dà)小(xiǎo)做(zuò)，小(xiǎo)分(fēn)辨♥γε£率玩(wán)家(jiā)隻能(néng)看(kàn)到(dào)中間(jiān)的(de★ )人(rén)物(wù)而已。

經常先誠科(kē)技(jì)做(zuò)全flash站(zhàn)的(de)時(shí)候±♦₽，會(huì)看(kàn)到(dào)多(duō)媒體(tǐ)的(de)↕♠ ↔同學會(huì)為(wèi)了(le)配合多(d±"Ω→uō)分(fēn)辨率做(zuò)展示上(shàn≈δg)的(de)自(zì)适應。

而重構其實純靠css也(yě)可(kě)以實現(xiàn)同樣的(de± "")縮放(fàng)自(zì)适應：

這(zhè)樣不(bù)會(huì)因為(wèi)分(fēn)辨率小(xiǎo)而   隻能(néng)看(kàn)到(dào)←ε↑↑中間(jiān)一(yī)個(gè)區(qū)域，或者出現(xiàn♥εδ)滾動條影(yǐng)響體(tǐ)驗。
實現(xiàn)思路(lù)：

1: 針對(duì)IE：IE有(yǒu)個(gè)zo≈ 'πom屬性。雖然經常先誠科(kē)技(jì)用(yòng)它來(lái)清浮動什(€©shén)麽的(de)。但(dàn)是(shì)它在縮放(fàng)元素上 ≠σ(shàng)也(yě)是(shì)很(hěn)強大(dà)的(de)。eg：被設置zo✔±om:0.5的(de)元素會(huì)以該元素的(de)左上(shàng)角為(wèi)原點在直±  接被縮小(xiǎo)一(yī)半，所占據的(de)文(wén)檔流內(nèi)體(tǐ)積×&₹也(yě)會(huì)減少(shǎo)一(yī)半（IE7和(hé)8+®✔♠ε對(duì)zoom後的(de)元素的(de)margin值≈​±理(lǐ)解不(bù)同可(kě)以注意下(xià)，不(bù)過單純↕δ> 縮放(fàng)元素時(shí)不(bù)太需要(yào)用(y↕∞òng)到(dào)）。

firefox下(xià)呢(ne)，就(jiù)可(kě)以使用(yòng)css3的(d→γe)transform:scale()。（需要(yào)額外(wài)設置transfor ₹∞m-origin:0 0為(wèi)縮放(fàng)原點）。σε¥÷

另外(wài)zoom也(yě)被webkit支持，scale還(hái)是(sα≠hì)zoom請(qǐng)自(zì)行(xíng)選擇~

2. 接下(xià)來(lái)先誠科(kē)技(jì)就(jiù)可(kě)以按♦₽≥設計(jì)稿直接切成成一(yī)個(gè)巨大(dà)無比的(de)1920*10 ↓™00的(de)頁面。

3. 然後獲取用(yòng)戶的(de)當前窗(chuānλΩε g)口尺寸，eg當前窗(chuāng)口寬1200，φ™®β那(nà)麽先誠科(kē)技(jì)需要(y•★₩∑ào)縮放(fàng)的(de)比例 zoom=1200/1920=0× .625。然後把先誠科(kē)技(jì)的(d‍€e)主顯示的(de)父框縮小(xiǎo)0.625倍®<就(jiù)可(kě)以啦~（當然為(w₽"£♦èi)了(le)高(gāo)度不(bù)出滾動條，高(gāo)度的(de)尺寸也(yě)要(yào↕±©)納入計(jì)算(suàn)範圍）

是(shì)不(bù)是(shì)很(hěn)簡單呢(ne)？以後遇到(dào←✘)會(huì)影(yǐng)響內(nèi)容浏覽的(de)大(dà)頁面的(de)時(shí)¥φ'候 可(kě)以考慮用(yòng)這(zhè)種方法做(zuò)一(yī)個(&σgè)縮放(fàng)哦~
這(zhè)個(gè)主體(tǐ)是(shì)固定尺寸的(de)，然後通(tōng∑×"&)過js來(lái)計(jì)算(suàn)定位和(hé)銜接背景做(zuò)到(dà©₹$<o)自(zì)适應&無滾動條。可(kě)以看(kàn)到(d☆★ào)跟上(shàng)邊的(de)例子(zǐ)比這(zhè)些(xiē)人(rén)物(w<↓ù)的(de)尺寸都(dōu)沒有(yǒu)改變。
計(jì)算(suàn)思路(lù)神馬的(de)因為(wèi)以前做(zuò)過分(f₩±→ēn)享所以不(bù)再贅述~感興趣的(de)同學可(kě)以查看(kàn)代碼或者私下(♠₹xià)跟我討(tǎo)論^^
二、移動端

移動端雖然整體(tǐ)尺寸小(xiǎo)+倒下(xià‌ )去(qù)豎起來(lái)的(de)尺寸差别太大(dà)，但(dàn)是(shì)本質和(h₹©é)PC端頁面沒什(shén)麽區(qū  ∏✔)别。

常見(jiàn)的(de)自(zì)适應自(zì)•ε"♥然就(jiù)是(shì)：

1. 響應式，media queries配合百分(fēn)比讓頁面內(n‌•&±èi)容自(zì)然的(de)去(qù)适應((✔βλhttp://game.qq.com)；

2. 根據浏覽器(qì)尺寸然後進行(xíng)動态的(de)定位（http://up✔↕.qq.com/2014/await/）。 手機(jī)輸入網址浏覽或掃描下(xià)排二維碼

如(rú)果單獨做(zuò)手機(jī)端的(de)頁面，用(yòng)上(♠↑δ←shàng)述方法做(zuò)自(zì)然正常顯示不∞≥↔£(bù)是(shì)問(wèn)題，但(dàn)是(shì)當時(shí)間(jiān∞×")緊任務重或者資源不(bù)夠需要(yào)PC和(hé)手機(jī)使用(yò♠δ ng)同一(yī)套頁面時(shí)，如(rú)何适應手機(jī)就(jiù)是(shì)個(g≈☆≈±è)需要(yào)考慮的(de)問(wèn)題了(le)。

打開(kāi)會(huì)發現(xiàn)這$  §(zhè)就(jiù)是(shì)一(yī)個(gè)正常的(∞λde)PC端的(de)活動頁面，但(dàn)是(shì)¥×因為(wèi)從(cóng)策劃到(dào)上(shàng)線的(de)時(shí)間(ji¶®©ān)都(dōu)非常緊沒有(yǒu)時(shí)間(γ∑÷jiān)為(wèi)手機(jī)版單獨做(zuò)一(yī)套，所以就(jiù)要₹β(yào)考慮如(rú)何能(néng)φ®适應手機(jī)浏覽了(le)。

因為(wèi)這(zhè)個(gè)活動系列其實↕£™是(shì)拉數(shù)據後趣味展示（其實就(jiù)是(shì)定位圖•₽≈片和(hé)文(wén)字在頁面上(shàng)），所以定位和(hé)寬度用(yòng)百分✔₩(fēn)比進行(xíng)後很(hěn)可(kě)能(néng)在顯示的(de)時(±¥shí)候出問(wèn)題；字體(tǐ)可(kě)能(néng)因為(wèi)分(fēn  ¥)辨率小(xiǎo)的(de)時(shí)候換行(xín≠♣δ↓g)；甚至頁面的(de)背景和(hé)高♣•​(gāo)度在适應多(duō)分(fēn)辨率的(d ™<≥e)手機(jī)時(shí)也(yě)不(bù)易控制(zhì)等等等等（我< 糾結了(le)一(yī)堆的(de)憂慮）。

怎麽辦？

咳~聰明(míng)的(de)您一(yī)定想到(dào)了(le)，嗯~就(jiù)用(y←↓∏εòng)先誠科(kē)技(jì)PC端的→★®₩(de)第一(yī)個(gè)例子(zǐ)，縮放(fàng)搞定！
同一(yī)套頁面，在一(yī)個(gè)小(xiǎo)小(xiǎo)的(deβ≤₽)操作(zuò)下(xià)便可(kě)以變♠←•π成手機(jī)端可(kě)以浏覽的(de)了(le)。

（因為(wèi)是(shì)PC端的(de)活動所以調用(‍εyòng)的(de)是(shì)PC的(de)™→登錄&選大(dà)區(qū)組件(jiàn)，所以造成手機(™¶♦jī)端操作(zuò)有(yǒu)槽點，不(bù)過在本次分(f♣÷↓ēn)享裡(lǐ)請(qǐng)先忽視(shì)它>π→₹☆_<！開(kāi)發組件(jiàn)的(de)多(duō)終端智能(néng)适配就(j→§γiù)是(shì)我接下(xià)來(lái)努力解決的(de↓λ)一(yī)個(gè)點。）
結束語：

希望這(zhè)個(gè)分(fēn)享能(néng)給大(dà)♠≈↕♦家(jiā)在不(bù)同分(fēn)辨率下(xià)的(de)顯示提供了(le)思路>≠(lù)。響應式啦、百分(fēn)比啦、動态定位啦，或者縮放(fàng)♦±♥，在靈活配合後，相(xiàng)信可(kě)以為(wèi)先誠科(kΩ♠"↕ē)技(jì)的(de)頁面在比較不(bù)友(yǒu)好(hǎo)的(de)分(fēn)辨率Ω∏∏下(xià)提供支持。

另外(wài)其實我不(bù)會(huì)寫結束語，所以就(jiù)這(zhè)樣吧(ba)$÷^ ^！