跟大家講解下有關web網頁設計尺寸規范，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說web網頁設計尺寸規范，小編也收集到了有關web網頁設計尺寸規范的相關資料，希望大家看到了會喜歡。

網頁設計的尺寸主要和兩個因素有關，一個是電腦顯示器的分辨率，還有瀏覽器的分辨率。

800×600下，網頁寬度保持在778以內，就不會出現水平滾動條，高度則視版面和內容決定。1024×768下，網頁寬度保持在1002以內，如果滿框顯示的話，高度是612之間，就不會出現水平滾動條和垂直滾動條。

相關文章推薦：1.常用的CSS命名規范大總結，非常實用（收藏） 相關視頻推薦：1.玉女心經系列：前端入門_HTML5

推薦：web尺寸規范

一、分辨率

網頁設計的尺寸主要和兩個因素有關，一個是電腦顯示器的分辨率，還有瀏覽器的分辨率，其實還有一些操作系統，Windows或者Mac os或者其他的。什么叫分辨率呢，比如說1024×768的，就是橫向有1024個像素，豎向有768個像素，整個屏幕可以看成是一個象棋盤，屏幕的尺寸是14寸還是15寸的，這個尺寸是不會變的，電腦是多大就是多大，變化的是電腦設置的分辨率，如果相同尺寸的屏幕，分辨率越大畫面就越精細。

二、有效可視區域

當下比較流行的屏幕分辨率有1024×768,1366×768,1280×800,1280×1024，1440×900,1600×900，1920×1080等。設計網頁時要考慮好瀏覽器的分辨率，主流的瀏覽器有IE,谷歌，火狐，歐朋等。

什么叫瀏覽器的有效可視區域呢，在我理解就是顯示內容的地方，比如打開一個網頁后，刨除瀏覽器的工具欄和側邊欄等，真正顯示內容的地方。

每個瀏覽器都有自己不同的有效可視區域，如下面的表格：

主流瀏覽器的界面參數與份額：

瀏覽器狀態欄菜單欄滾動條市場份額(國內)

Chrome 瀏覽器

22 px（浮動出現）60 px 15 px 8%

火狐瀏覽器

20 px132 px 15 px 1%

IE瀏覽器

24 px120 px 15 px35%

360 瀏覽器

24 px140 px 15 px28%

遨游瀏覽器

24 px147 px 15 px 1%

搜狗瀏覽器

25 px163 px 15 px5%

系統分辨率統計：

分辨率占有率分辨率占有率

1366×768

15%

1440×900

13%

1920×1080

11%

1600×900

5%

1280×800

4%

1280×1024

3%

1680×1050

2.8%

320×480

2.4%

480×800

2%

1280×768

1%

網頁寬度與首屏高度：

以上就是web網頁設計尺寸規范的詳細內容，更多請關注php中文網其它相關文章！

來源：php中文網