罗马假日电影>建站動態>網頁寬度怎么設置,一篇文章說明白!

動態詳情

《罗马》剧照:網頁寬度怎么設置,一篇文章說明白!

新聞作者:北京建站     2019-08-11 19:15:32      新聞來源:罗马假日电影      訪問量:768

罗马假日电影 www.yvgtte.com.cn   對于剛從事網頁設計的新人來說,PC端頁面的設計是一個充滿未知的領域,對于如何畫布、設置規格,都處在兩眼一抹黑的狀態。其中也包括了網頁寬度怎么設置這一問題。為了幫助大家更好的掌握網頁設計基礎內容,我們今天一篇文章說明白,網頁寬度怎么設置這一問題。
 

網頁寬度怎么設置,一篇文章說明白!
1


  首先,網頁設計的第一步就是畫布創建了,這也是困擾我們的第一個難題。由于市面上存在多種前端技術的應用,以及一些歷史遺留問題、設計場景差異等因素的影響,我們在搜索「網頁設計寬度」這類問題的時候,得到的結果會有非常多的版本,導致更加迷茫。

  所以,了解網頁設計的寬度定義,勢必要理解它們的底層原因,因為寬度的設置:只有合適的寬度,沒有絕對正確的寬度。

  對于任何網頁設計的項目,寬度設定的標準都是不同的,而在選擇寬度的過程里,需要考慮 2 個核心因素:

  1. 設備因素

 

網頁寬度怎么設置,一篇文章說明白!
2


  設備因素即確認項目主要展示的屏幕設備是哪一種,它們對應的分辨率是多少。最粗略的劃分,可以將設備劃分成 PC 端和移動端。這兩者受制與顯示的尺寸,系統的限制,在設計和操作上都有比較大的區別。

  1)瀏覽設備

  瀏覽設備即網頁用戶所使用的屏幕類型,主要考量的標準是屏幕的分辨率(長寬像素數)。常見的 PC 屏幕分辨率有 1280×800、1600×900、1440×800、1366×768、1920×1080、1024×769等,再加上一些更加不常見的(比如 surfacebook 的 3000×2000),可以列出數十種,這是大家都已經知道的事情。

  就目前中國最常見的PC端屏幕分辨率使用率來看,1920×1080占27.38%;1366×768占21.06%;1440×800占11.59%;1024×769占7.12%;1600×900占4.68%;1280×800占3.24%。然后得出最常用的分辨率是 1080P。有了數據支撐,我們不就可以開始動手設計了?

  2)最小適配屏幕

  實際上這個做法是錯誤的。對于網頁設計來說,我們首先應該確定的是──最小適配屏幕。

  因為在一般場景下,顯示器分辨率如果大于畫布,內容可以被我們正常訪問;如果小于畫布,內容就會顯示不全,相當于低于這個分辨率設備的用戶被我們放棄了。

  所以,做個簡單的計算,如果以 1920×1080 為基礎,則支持的用戶數為 27.38 %;如果是 800×600,則支持用戶數低于 3%。

  這么考慮的話,我們是不是只要支持最小的分辨率即可?當然也不是。

  在今天,1024 以下寬度的設備已經非常稀少,即便是 1024 本身,主流的設備也是平板而不是一般的 PC 電腦。當這些設備的數量低到成為絕對的非主流時,是可以選擇忽略它們,以滿足更多人的需要。

  所以通常,我們最低支持的分辨率,不是 1024×768 就是 1280×800。如果大家不相信,可以去各類網站中,用 QQ 截圖工具量一下主要內容區域的寬度,很難出現大于這兩個數值的情況。

  2. 展示類型

 

網頁寬度怎么設置,一篇文章說明白!
3


  展示類型,也只有兩點,即寬度適應屏幕,或者是定寬。

  先說說第一種,可能有不少人已經聽過響應式布局和自適應設計的大名,先不論它們有什么區別,它們代表了網頁顯示內容隨瀏覽器窗口尺寸變化而變化的技術。

  響應式設計的規則非常靈活,會受到更多因素的影響,完整的響應式界面設計會如上圖所示,提供多種尺寸的設計圖。常見的如 1920、1080、640 寬。

  如果是定寬的設計,那么就回到前面所說,我們只需要以適配 1280 或 1024 的屏幕展開設計即可。但是,網頁的實際內容區域,和我們要適配的范圍是不同的。

  在瀏覽器中,首先有右側滾動條的因素影響,并且主體內容的兩側也要預留出內邊距。

  所以,我們真正創建的網頁內容區域,是小于 1280 或者 1024 的。而得出具體的內容區域尺寸的方法,是通過網頁的刪格系統計算出來的。

  網頁刪格系統是由平面網格系統衍生出來,針對網頁使用的排版系統。如果稍微看過這類文章的同學都會看見一個公式:(Axn)- i = W

  A:一個柵格單元的寬度

  n:正整數

  i:柵格與柵格之間的間隙

  W:頁面/區塊的總寬度

  這個做法就是通過將內容區域劃分成若干內容塊和間隔??櫚姆絞?,輔助我們排版。

  如果選擇適配 1280,那么設計內容的區域寬通常為 1180、1190。而在適配 1024 下,那么內容區域寬常見的就有 950、970、990 等。當我們創建完完整分辨率的畫布,再通過參考線的方式將內容區域規劃出來即可。

  對于網頁設計來說,最重要的參數就是內容區域的寬度,但也有一些元素是例外,很多人可能發現網頁有一些元素是超過正常的內容區域的(無論是對一般顯示模式或是自適應模式),最常見的就是頂部的導航欄和底部的頁腳區域。比如打開淘寶無論拉伸得多長,內容區域固定是 1190 寬,而導航欄卻永遠撐滿整個瀏覽器。

  所以,我們不會將這些內容的寬度計算在內,在設計稿中只要設計了這樣的元素,和前端人員適當溝通和標注,就可以獲得想要的效果。

  總結:

 

網頁寬度怎么設置,一篇文章說明白!
4


  1、當前最流行的分辨率是1920*1080的,在該分辨率下,頁面中心區域為1200px以內都可以。建站人建議1000-1200

  2、其他分辨率情況下的尺寸如下:

  800*600下,網頁寬度保持在778以內;

  1024*768下,網頁寬度保持在1002以內;

  3、(1920*1080分辨率下)頂部banner尺寸建議1920*500,最頂部信息欄與導航欄建議高度40、126

  4、網頁中字體也是有使用規范的,合適的字體大小才能展現出最完美的效果,網頁尺寸標準字體不標準也不行(1920*1080分辨率下)

  6、如果沒有指定的要求,以1920尺寸設計就好(這是目前最普遍的尺寸大小),前端開發人員會自行適配其他的分辨率

  7、網頁設計師的目標就是在瀏覽器和開發語言的限制下找出合適的設計方案。如果沒有把握,請就使用 960/980px 的方案即可。如果要使用更寬的畫布,則一定要弄明白各項限制和緣由。

 

發布評論:

昵稱:

暫無評論

友情鏈接:
京ICP備16060213號-2  北京雙立人網絡科技有限公司  版權所有 Copyright©2018 罗马假日电影 www.yvgtte.com.cn All Rights Reserved
聯系電話:400-002-0761(7d×24h)       
 
 

立即定制  

  • 項目名稱:
  • 聯系人:
  • 聯系QQ:
  • 所屬行業:
  • 聯系電話:
  • 聯系Email:
  • 需求概要: