在深圳地區(qū)擁有十多年網站設計經驗的國人偉業(yè)為大家分享以下關于網站設計中如何使用考量寬度的技巧:
設備因素即確認項目主要展示的屏幕設備是哪一種,它們對應的分辨率是多少。最粗略的劃分,可以將設備劃分成 PC 端和移動端。這兩者受制與顯示的尺寸,系統(tǒng)的限制,在設計和操作上都有比較大的區(qū)別。
瀏覽設備
瀏覽設備即網頁用戶所使用的屏幕類型,主要考量的標準是屏幕的分辨率(長寬像素數(shù))。常見的 PC 屏幕分辨率有 1280×800、1600×900、1440×800、1366×768、1920×1080、2560×1440 等,再加上一些更加不常見的(比如 surfacebook 的 3000×2000),可以列出數(shù)十種,這是大家都已經知道的事情。
所以基于這個前提,很多人會去查找關于屏幕使用分辨率的統(tǒng)計表格,比如下圖這種,然后得出最常用的分辨率是 1080P。有了數(shù)據(jù)支撐,我們不就可以開始動手設計了?
實際上這個做法是錯誤的。對于網頁設計來說,我們首先應該確定的是──最小適配屏幕。
因為在一般場景下,顯示器分辨率如果大于畫布,內容可以被我們正常訪問;如果小于畫布,內容就會顯示不全,相當于低于這個分辨率設備的用戶被我們放棄了。
所以,做個簡單的計算,如果以 1920×1080 為基礎,則支持的用戶數(shù)為 27.38 %;如果是 800×600,則支持用戶數(shù)低于 3%。
這么考慮的話,我們是不是只要支持最小的分辨率即可?當然也不是。
在今天,1024 以下寬度的設備已經非常稀少,即便是 1024 本身,主流的設備也是平板而不是一般的 PC 電腦。當這些設備的數(shù)量低到成為絕對的非主流時,是可以選擇忽略它們,以滿足更多人的需要。
所以通常,我們最低支持的分辨率,不是 1024×768 就是 1280×800。如果大家不相信,可以去各類網站中,用 QQ 截圖工具量一下主要內容區(qū)域的寬度,很難出現(xiàn)大于這兩個數(shù)值的情況。