網(wǎng)頁設(shè)計尺寸規(guī)范及標準詳解
1. 屏幕分辨率寬度
我們只看 PC 端,根據(jù)現(xiàn)在屏幕大小的分布統(tǒng)計(下圖為百度流量研究院最新數(shù)據(jù))
網(wǎng)站建設(shè)過程中絕大多數(shù)屏幕的分辨率已經(jīng)超過 1366*768,這是個屏幕逐漸變大的趨勢,幾年前我們還需要考慮在 1024* 768 這個非常普遍的分辨率下的顯示效果,現(xiàn)在基本上不需要單獨對其做處理了。
這個分辨率值只是上限參考,你不可能把頁面的實際顯示內(nèi)容區(qū)(或者叫安全區(qū))搞到這個值,因為在 Windows 等部分瀏覽器上,滾動條等也要占據(jù)寬度,同時過分的貼邊在設(shè)計上是不被推薦的。
理解了這個我們就能清楚的知道一個基準值的參考范圍。
2. 柵格與響應(yīng)式設(shè)計
這里需要理解一個概念,通常為了布局方便我們將內(nèi)容區(qū)域劃分為12或者24格,并在柵格間增加通用間距來處理絕大多數(shù)情況下的垂直排列問題,12或24的好處是能夠被2、3、4整除,更方便來處理2:1,1:2:1等常見間距。
計算方式(我這里常見的是處理企業(yè)級的設(shè)計頁面)
到這里基本上就知道為什么我們常見的值會是1180(1200減去兩邊柵格的留白)。這個值叫做典型設(shè)計參照,以往的設(shè)計平面稿是沒辦法動態(tài)適配各種寬度的,用典型值來作為設(shè)計稿基準尺寸能夠表達典型效果,并在頁面實現(xiàn)時更容易還原。
響應(yīng)式布局是最近幾年比較流行的概念,在網(wǎng)頁渲染時,能夠根據(jù)視窗寬度自動對 Layout 及頁面元素進行重新排列。比較常見的 Bootstrap 響應(yīng)式部分的介紹:
以及柵格部分的詳細描述:
下面這張圖給出了 Bootstrap 的常見屏幕狀態(tài)下的幾個典型值:
關(guān)于網(wǎng)頁字體大小等問題,也可以參考上面比較經(jīng)典的設(shè)計規(guī)范約定。常見的內(nèi)容段落文字大小約定為 14px。我這邊在做的規(guī)范,關(guān)于排版的約定如下:
建站流程
-
網(wǎng)站需求
-
網(wǎng)站策劃方案
-
頁面設(shè)計風格
-
確認交付使用
-
資料錄入優(yōu)化
-
程序設(shè)計開發(fā)
-
后續(xù)跟蹤服務(wù)
-
聯(lián)系電話
010-60259772
熱門標簽
- 網(wǎng)站建設(shè)
- 食品網(wǎng)站建設(shè)
- 微信小程序開發(fā)
- 小程序開發(fā)
- 無錫網(wǎng)站建設(shè)
- 研究所網(wǎng)站建設(shè)
- 沈陽網(wǎng)站建設(shè)
- 廊坊網(wǎng)站建設(shè)
- 鄭州網(wǎng)站建設(shè)
- 婚紗攝影網(wǎng)站建設(shè)
- 手機端網(wǎng)站建設(shè)
- 高校網(wǎng)站制作
- 天津網(wǎng)站建設(shè)
- 教育網(wǎng)站建設(shè)
- 品牌網(wǎng)站建設(shè)
- 政府網(wǎng)站建設(shè)
- 北京網(wǎng)站建設(shè)
- 網(wǎng)站設(shè)計
- 網(wǎng)站制作
最新文章
推薦新聞
更多行業(yè)-
淺析網(wǎng)站無快照而內(nèi)頁有收錄的四個原因
網(wǎng)站快照一直是站長判斷網(wǎng)站是否對搜索引摯友好的因素之一,而網(wǎng)站一旦...
2012-02-06 -
細說符合SEO優(yōu)化的營銷型網(wǎng)站需要哪些功能
現(xiàn)在的網(wǎng)站絕大多數(shù)是通過營銷型網(wǎng)站建設(shè)和管理的,但是作為一個需要做SE...
2014-01-10 -
北京網(wǎng)站建設(shè):為集團企業(yè)量身打造定制網(wǎng)站
企業(yè)網(wǎng)站已經(jīng)成為企業(yè)展示形象、吸引客戶、推廣產(chǎn)品與服務(wù)的重要平臺。而對...
2024-04-03 -
企業(yè)網(wǎng)站怎樣設(shè)計效果好?看看這些方法
一個完整的網(wǎng)站開發(fā)建設(shè)由前端頁面和后端功能組成。現(xiàn)在,有了一些現(xiàn)成的網(wǎng)...
2022-04-06 -
微信小程序商城可以直接提現(xiàn)嗎?
當網(wǎng)購成為大家消費主要渠道和習慣時,微信小程序商城就成為了大家的首選。...
2023-03-24 -
網(wǎng)站建設(shè)5個細節(jié)提高網(wǎng)站建設(shè)
現(xiàn)在做網(wǎng)站的公司越來越多,可是這些人的技術(shù)水平大有不同,有的技術(shù)可以進...
2018-08-09
預(yù)約專業(yè)咨詢顧問溝通!
免責聲明
非常感謝您訪問我們的網(wǎng)站。在您使用本網(wǎng)站之前,請您仔細閱讀本聲明的所有條款。
1、本站部分內(nèi)容來源自網(wǎng)絡(luò),涉及到的部分文章和圖片版權(quán)屬于原作者,本站轉(zhuǎn)載僅供大家學習和交流,切勿用于任何商業(yè)活動。
2、本站不承擔用戶因使用這些資源對自己和他人造成任何形式的損失或傷害。
3、本聲明未涉及的問題參見國家有關(guān)法律法規(guī),當本聲明與國家法律法規(guī)沖突時,以國家法律法規(guī)為準。
4、如果侵害了您的合法權(quán)益,請您及時與我們,我們會在第一時間刪除相關(guān)內(nèi)容!
聯(lián)系方式:010-60259772
電子郵件:394588593@qq.com