網(wǎng)頁設(shè)計(jì)的寬度到底應(yīng)該定多少？我們用統(tǒng)計(jì)數(shù)據(jù)來說話。
百度統(tǒng)計(jì)流量研究院對(duì)于2017年上半年的分辨率使用情況統(tǒng)計(jì)得出。
排名第一的是360×640，這是豎屏，一般在醫(yī)院、學(xué)校中才能見到，暫且不談。
排名第二的是1920×1080，占比13.07%。
1366×768排第三，占比6.32%。這說明現(xiàn)在主流的電腦分辨率是1920×1080。
排名第七的分辨率，1024×768，是最小的電腦尺寸了，僅占3.13%，很少有人使用。在做pc端的網(wǎng)頁設(shè)計(jì)時(shí)，不用考慮這個(gè)尺寸，而應(yīng)在做pad端和手機(jī)端的適配時(shí)，將其納入考慮。
比如，我所在的公司現(xiàn)在做的適配是：當(dāng)分辨率寬>1200px時(shí)，采用pc端的樣式；當(dāng)分辨率寬<1200px時(shí)，采用移動(dòng)端的樣式，即pad端和手機(jī)端的樣式一致。
而更高級(jí)的響應(yīng)式網(wǎng)站應(yīng)該是在嚴(yán)格的柵格規(guī)范下，適應(yīng)于不同寬度，確保各寬度下的展示效果。但這樣的成本也會(huì)相應(yīng)增加，在開發(fā)網(wǎng)站時(shí)，需綜合考慮實(shí)際需求和開發(fā)成本。time（《時(shí)代周刊》官網(wǎng)）是個(gè)很好的響應(yīng)式網(wǎng)頁案例。
除了統(tǒng)計(jì)數(shù)據(jù)以外，還需要將產(chǎn)品的目標(biāo)用戶納入分析。技術(shù)型公司面對(duì)的用戶是高端技術(shù)人才，這類人物的顯示器分辨率不會(huì)太低；如果目標(biāo)用戶是一二線城市的人，那么也優(yōu)先考慮主流分辨率。
所以在做網(wǎng)頁設(shè)計(jì)時(shí)，最好將寬度規(guī)定為1200px，主要內(nèi)容都在1200px的范圍內(nèi)展示，既能確保主流分辨率的展示效果，又不會(huì)影響較低分辨率下的效果。
舉個(gè)栗子，以下兩圖分別為騰訊云在小屏（1280×1024）的顯示器和大屏（1920×1080）的顯示器下的展示效果。
那么，除了寬度問題，高度怎么定也是關(guān)鍵，這涉及到每一屏展示的效果，是全屏鋪滿還是只占半屏？這就涉及到了瀏覽器的高度，而非顯示器的高度。
表中的安全高度即網(wǎng)頁在瀏覽器中每一屏的最大高度，所以如果想把內(nèi)容控制在一屏之內(nèi)，高度就不要超過最大高度。
在設(shè)計(jì)時(shí)，掌握好這些規(guī)范，能大大提高工作效率、降低修改率，共勉。
