最新的(de)分辨率數據顯示，PC端裏1024*768占20%、1920*1080占14%。而(ér)這(zhè)2個(gè)分辨率的(de)顯示寬度相差了(le／liǎo)接近一(yī / yì ／yí)倍。
而(ér)現在(zài)設計師的(de)設計稿普遍輸出(chū)尺寸都是(shì)1920，所以(yǐ)設計師經常也(yě)會擔心：小分辨率下能看到(dào)嗎？或者需要(yào / yāo)爲(wéi / wèi)手機端單獨做一(yī / yì ／yí)版嗎？所以(yǐ)我們需要(yào / yāo)用一(yī / yì ／yí)些技巧來(lái)讓大(dà)多數用戶能看到(dào)的(de)頁面效果是(shì)一(yī / yì ／yí)樣的(de)。

比如這(zhè)個(gè)是(shì)在(zài)1920*1080的(de)分辨率下面顯示，但是(shì)如果直接按照原大(dà)小做，那麽小分辨的(de)用戶就(jiù)隻能看到(dào)一(yī / yì ／yí)部分了(le／liǎo)，這(zhè)時(shí)候我們就(jiù)需要(yào / yāo)使用網頁自适應。

純CSS網頁自适應:
思路：
1: 針對IE：IE下有zoom屬性。雖然我們經常用它來(lái)做兼容性。但是(shì)它其實在(zài)縮放元素上(shàng)也(yě)是(shì)很強大(dà)的(de)。eg：被設置zoom:0.5的(de)元素會以(yǐ)該元素的(de)左上(shàng)角爲(wéi / wèi)原點在(zài)直接被縮小一(yī / yì ／yí)半，所占據的(de)文檔流内體積也(yě)會減少一(yī / yì ／yí)半（IE7和(hé / huò)8+對zoom後的(de)元素的(de)margin值理解不(bù)同可以(yǐ)注意下，不(bù)過單純縮放元素時(shí)不(bù)太需要(yào / yāo)用到(dào)）。另外webkit也(yě)支持zoom。
2. 接下來(lái)我們就(jiù)可以(yǐ)按設計稿直接切成成一(yī / yì ／yí)個(gè)巨大(dà)無比的(de)1920*1000的(de)頁面。
3. 然後獲取用戶的(de)當前窗口尺寸，加入當前窗口寬1200，那麽我們需要(yào / yāo)縮放的(de)比例 zoom=1200/1920=0.625。然後把我們的(de)主顯示的(de)父框縮小0.625倍就(jiù)可以(yǐ)啦~（當然爲(wéi / wèi)了(le／liǎo)高度不(bù)出(chū)滾動條，高度的(de)尺寸也(yě)要(yào / yāo)納入計算範圍）是(shì)不(bù)是(shì)很簡單呢？以(yǐ)後遇到(dào)會影響内容浏覽的(de)大(dà)頁面的(de)時(shí)候 可以(yǐ)考慮用這(zhè)種方法做一(yī / yì ／yí)個(gè)縮放哦~