網頁設計布局與顯示分辨率的關系

發布時間:2020-01-16 09:55:00

目前筆記本電腦的普通屏幕分辨率為1366*768;臺式機的普通屏幕分辨率為1440*900、1920*1080。市場上可能遇到的最小分辨率為1280*768,例如投影儀或其他設備(其他較小的屏幕可能暫時不考慮)。

網頁設計布局與顯示分辨率的關系

目前筆記本電腦的普通屏幕分辨率為1366*768;臺式機的普通屏幕分辨率為1440*900、1920*1080。市場上可能遇到的最小分辨率為1280*768,例如投影儀或其他設備(其他較小的屏幕可能暫時不考慮)。

為了保證內容能在小屏幕下完全查看,目前常用的固定寬度頁面大小為1200像素。實際上,可以根據顯示的內容、頁面導航、頁面的其他元素、需要調整頁面的終端等進行調整,例如,簡單圖書的首頁寬度為960px;京東訂單的詳細信息為1210px。

固定寬度的頁面通常用于:詳細信息、圖片、帶有少量字段的列表、內容流等。

固定寬度的頁面雖然可以避免屏幕適應的麻煩,但對于一些內容來說,可能會覺得大屏幕下太摳門,而且體驗不好,比如圖片。站在這一點上冷靜下來,治療效果更好,我們可以從中吸取教訓。當屏幕寬度大于1600時,使用1400的固定寬度;當屏幕小于1600時,使用1150的寬度,并且圖像大小也會改變。(注:淘寶和京東的列表頁面也采用了類似的處理方式。)

全屏頁面意味著,除了頁面左右兩側的邊框外,頁面中的內容將填充屏幕大小。但是,為了保證頁面內容的正常顯示,通常會設置最小自適應寬度。如果頁面低于寬度,則不進行配置,并且頁面將顯示一個水平滾動條。

全屏頁面常用于:網站宣傳頁面、左側導航的管理網站、多字段列表頁面、需要全屏查看的看板頁面、使用瀑布流的頁面、或用戶需要較大可視區域方便操作的元素頁面,如地面地圖跟蹤等。

對于全屏頁面,您需要考慮當屏幕變大或變小時如何適應。常用的適應方法有:

按屏幕大小比例放大(或設置不同的放大/縮小比);

根據屏幕尺寸加寬元素,保持元素高度不變(大屏幕下,可能導致元素比例變形,視覺效果差);

根據屏幕大小,增加/減少每行顯示的內容量(最適合頁面內容的網格布局);

使用bootstrap等框架,采用響應式布局(根據屏幕大小,同時改變大小和元素布局模式)。

應該采用哪種改編方法取決于頁面內容、大小屏幕下的內容顯示以及整個網站使用的框架。

當頁面內容超過頁面高度時,您想使用頁面滾動條還是在模塊中滾動?

頁面滾動條適用于內容流頁面。對于這種頁面,頁面底部是固定的,或者底部沒有其他元素。此外,此滾動方法需要與“返回頂部”按鈕一起使用。當數據需要分頁時,通常使用滾動分頁。

在模塊內滾動通常用于操作需要在頂部/底部固定的頁面。當頁面中有多個模塊需要滾動或模塊被分成較小的部分時,需要考慮每個模塊的可視區域是否太小,無法在小屏幕下操作。當數據需要分頁時,通常使用翻頁分頁。


聯系我們,談您的需求

立即咨詢
青海十一选五走势图表