整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
頁設計尺寸是多少?下面就來學習一下。
網頁設計尺寸
制作網頁時我們選用的分辨率是72像素/英寸，使用的畫布尺寸1920px*1080px。但并不代表我們可以在整個畫布上作圖。
網頁的布局主要有兩種：左右型布局和居中型布局。布局的不一致，使可設計的空間也不相同。
左右結構型
1、左右布局，靈活性強，UI的限制小;
2、左邊通欄為導航欄，寬度沒有具體的限時，可以根據實際情況進行調整;
3、右側為內容板塊范圍，是網站內容展示區域。
居中型
4、居中布局，中間的黃色部分為有效的顯示區域，用于網站內容的展示。
5、換句話說，兩邊均為留白，沒有實際用途，只是為了適配而存在。
6、內容限時區域在好控制在1000px-1200px。
網頁常用字體
現在網頁的布局我們已經了解了，那么接下來就是網頁中常用到的字體。
字體設計的總原則是：可辨識性和易讀性。
中文建議使用微軟雅黑字體，英文則建議使用arial 字體。常用的字體大小號有以下幾種：
1、12px是用于網頁的最小字體，適用于突出性的日期，版權等注釋性內容。
2、14px則適用于非突出性的普通正文內容。
3、16px或18px適用于突出性的標題內容。
4、網站的字體大小并沒有硬性規定具體的字號，根據實際情況可以酌情考慮，但是要有限適用偶數字號。
5、字體規格也不需要太多，最好適用三種混搭。如果需要更多
6、層次的區別，可以改變字體顏色或加粗來體現。
網頁設計WEB端設計規范總結
一.尺寸規范
在網頁設計中首先要解決的是網頁布局大小及尺寸的問題，在ps新建文檔中可以見到當今常見web網頁尺寸，最常見尺寸為1366*768像素。
二.網頁的寬度尺寸
為了適應屏幕的顯示，頁面寬度設制要有一定的范圍值，其實在設計及設計學中也沒有相關硬性規定，但是為了兼容大多數瀏覽器一般是設置960px，隨著現在瀏覽器分辨率的變化，已開始1000px,1200px寬度發展，例如淘寶(1000px)京東商城(1200px)。如果需要兼容不同瀏覽器尺寸，現在比較流行的做法是做成響應式的，即根據不同分辨率顯示不同的尺寸，工作量也就隨之增加了。
三.主流瀏覽器
國際通用的有
chrome，IE，firefox，safari，opera
國內的知名瀏覽器有
QQ瀏覽器，獵豹瀏覽器，2345瀏覽器，搜狗瀏覽器，360瀏覽器，UC瀏覽器等
知道了瀏覽器的設計特點才能更好的設計頁面，比如瀏覽器的頭部的操作高度和信息的展示都會有所不同，那么頁面在每個瀏覽器上面的展現就會有所不同。
四.點擊操作
主要通過鼠標點擊、滑動、滾動、拖拽。
網頁設計所需注意事項
沒有內容層次用戶的眼睛喜歡有秩序的設計，如頭部包含導航和LOGO，特定內容使用lightbox，三列分欄，頁腳。它有助于在內心組織重要的信息，并引導用戶注意在你想讓他注意的地方。在傳統藝術中，新手們被教導色彩價值和線性透視三原則和其他藝術指導。在網頁設計中，沒有特別奉行的準則，但以直觀的方式組織你的內容是一條很好的經驗規則。也是多年培養的用戶習慣。最終習慣就是最終用戶。當然一成不變不是我們所鼓勵的。
太多的色彩背景一種顏色，內容文本一種顏色，鏈接一種顏色，頁頭和lightbox一種顏色，圖案和頁腳各一種顏色。這很好，因為它幫助區分了有用的內容。但是，多重漸變幾種鮮艷的色彩和大量有鮮明對比的色調及飽和度，會破壞你網站的層次和空白概念。嘗試限制自己只用一種鮮艷的色調(如藍色)，再搭配反相的單色(白灰黑)以獲得一個漂亮的搭配。這里強調下豆瓣的配色。也是我喜歡的顏色搭配。
太多的字體一般一個簡單的網頁設計，一般字體不超過3種。多則亂沒有足夠的空白空白可以說是設計中最重要的一部分。它有助于防止用戶在瀏覽網站時變得疲憊，它可以在內容中劃出距離，而且它本身也看上去不錯。空白不是必須用白色的，而是，它僅僅是為其他設計元素提供間隔和緩沖的空間不考慮用戶的分辨率。
對比的問題你考慮過閱讀黑底白字和白底黑字的不同嗎?你有沒有試過閱讀一下白底灰字?有些方式之所以比其他的更好，其原因就是這是一種眼睛感知到對比的方式。如果你很難舒服的閱讀文字，考慮一下改變字體大小或方式。
不一致，一致性是網頁設計的關鍵。它是把網頁設計組織在一起的方式，可以創造一種緊密結合的感覺。在網站頁面互相鏈接的情況下，它可以幫助用戶把所有頁面都聯系在一起。如果你在整個網站持續改變字體大小和色彩，用戶很快會覺得不知所措。
沒有足夠的文字間距與空白有關，文字間距有兩個部分，一個是字距，關系到字母之間的空白。一個是行距，關系到兩行文字之間的距離。這些有助于區分行與段落，使用戶更容易閱讀文字。
了解更多網絡營銷請關注珠海網站建設-杰作科技：www.jiezuo.org www.jiezuo.net www.jzuo.cn 珠海網站建設.com
原文鏈接：http://www.jzuo.cn/yingxiaodongtai/747.html
C 端網頁設計對于很多從事 UI 行業的新人來說是一個充滿未知的領域，對于怎么進行基本的畫布創建，規格設置，都處于兩眼一抹黑的狀態。雖然這是因為多數人沒有系統的學習 UI 知識，它并不是一個合理的現象。
接下來，我們會更新一些網頁設計的干貨，幫助更多 UI 設計師了解網頁設計的基礎知識。
首先，網頁設計的第一步就是畫布創建了，這也是困擾我們的第一個難題。由于市面上存在多種前端技術的應用，以及一些歷史遺留問題、設計場景差異等因素的影響，我們在搜索「網頁設計寬度」這類問題的時候，得到的結果會有非常多的版本，導致更加迷茫。
所以，了解網頁設計的寬度定義，勢必要理解它們的底層原因，因為寬度的設置：只有合適的寬度，沒有絕對正確的寬度。
對于任何網頁設計的項目，寬度設定的標準都是不同的，而在選擇寬度的過程里，需要考慮 2 個核心因素：
1. 設備因素
設備因素即確認項目主要展示的屏幕設備是哪一種，它們對應的分辨率是多少。最粗略的劃分，可以將設備劃分成 PC 端和移動端。這兩者受制與顯示的尺寸，系統的限制，在設計和操作上都有比較大的區別。
瀏覽設備
瀏覽設備即網頁用戶所使用的屏幕類型，主要考量的標準是屏幕的分辨率（長寬像素數）。常見的 PC 屏幕分辨率有 1280×800、1600×900、1440×800、1366×768、1920×1080、2560×1440 等，再加上一些更加不常見的（比如 surfacebook 的 3000×2000），可以列出數十種，這是大家都已經知道的事情。
所以基于這個前提，很多人會去查找關于屏幕使用分辨率的統計表格，比如下圖這種，然后得出最常用的分辨率是 1080P。有了數據支撐，我們不就可以開始動手設計了？
實際上這個做法是錯誤的。對于網頁設計來說，我們首先應該確定的是──最小適配屏幕。
因為在一般場景下，顯示器分辨率如果大于畫布，內容可以被我們正常訪問；如果小于畫布，內容就會顯示不全，相當于低于這個分辨率設備的用戶被我們放棄了。
所以，做個簡單的計算，如果以 1920×1080 為基礎，則支持的用戶數為 27.38 %；如果是 800×600，則支持用戶數低于 3%。
這么考慮的話，我們是不是只要支持最小的分辨率即可？當然也不是。
在今天，1024 以下寬度的設備已經非常稀少，即便是 1024 本身，主流的設備也是平板而不是一般的 PC 電腦。當這些設備的數量低到成為絕對的非主流時，是可以選擇忽略它們，以滿足更多人的需要。
所以通常，我們最低支持的分辨率，不是 1024×768 就是 1280×800。如果大家不相信，可以去各類網站中，用 QQ 截圖工具量一下主要內容區域的寬度，很難出現大于這兩個數值的情況。
2. 展示類型
展示類型，也只有兩點，即寬度適應屏幕，或者是定寬。
先說說第一種，可能有不少人已經聽過響應式布局和自適應設計的大名，先不論它們有什么區別，它們代表了網頁顯示內容隨瀏覽器窗口尺寸變化而變化的技術，比如使用 Bootstrap 架構的星巴克官網，更改瀏覽器窗口寬度后，可以得到以下不同的結果。
如果你現在還需要通過這篇內容學習網頁寬度制定的情況下，我是不建議在真實項目中使用這種展示類型的。因為它們都需要對前端架構有一定的熟悉，以及對 CSS 的屬性特性有基本認識，否則就無法在設計過程中直接考慮到其它分辨率下顯示的效果，以及制定不同元素的自適應方式。
響應式設計的規則非常靈活，會受到更多因素的影響，完整的響應式界面設計會如上圖所示，提供多種尺寸的設計圖。常見的如 1920、1080、640 寬。
如果是定寬的設計，那么就回到前面所說，我們只需要以適配 1280 或 1024 的屏幕展開設計即可。但是，網頁的實際內容區域，和我們要適配的范圍是不同的。
在瀏覽器中，首先有右側滾動條的因素影響，并且主體內容的兩側也要預留出內邊距。
所以，我們真正創建的網頁內容區域，是小于 1280 或者 1024 的。而得出具體的內容區域尺寸的方法，是通過網頁的刪格系統計算出來的。
網頁刪格系統是由平面網格系統衍生出來，針對網頁使用的排版系統。如果稍微看過這類文章的同學都會看見一個公式：
（Axn）- i = W
這個做法就是通過將內容區域劃分成若干內容塊和間隔模塊的方式，輔助我們排版。在本篇內容里不做具體介紹，只需要關注結果即可。
如果選擇適配 1280，那么設計內容的區域寬通常為 1180、1190。而在適配 1024 下，那么內容區域寬常見的就有 950、970、990 等。當我們創建完完整分辨率的畫布，再通過參考線的方式將內容區域規劃出來即可。
對于網頁設計來說，最重要的參數就是內容區域的寬度，但也有一些元素是例外，很多人可能發現網頁有一些元素是超過正常的內容區域的（無論是對一般顯示模式或是自適應模式），最常見的就是頂部的導航欄和底部的頁腳區域。比如打開淘寶無論拉伸得多長，內容區域固定是 1190 寬，而導航欄卻永遠撐滿整個瀏覽器。
所以，我們不會將這些內容的寬度計算在內，在設計稿中只要設計了這樣的元素，和前端人員適當溝通和標注，就可以獲得想要的效果。
總結
其實講了一堆，最后我們用一個表格來總結一下。
關于 PC 端網頁設計寬度的設定介紹到這里就結束了，如果有什么疑問，可以在評論區留言。
于在CSS中實現容器的長寬比最初的創意是來自于在Web中如何實現縱橫比。主要是用于響應式設計中的iframe、img和video之類的元素。隨之擴展為適用于任何容器的長寬比。那在CSS中到底有多少種方案可以實現呢？我一向喜歡做這樣的事情，到處搜集多種解決方案。
如果你看到前面的兩篇文章，或許你知道一些方法，或者說所有的方案你都想到了。如果是這樣的話，你可以停止閱讀這篇。如果沒有的話，你可以繼續往下閱讀。
長寬比在影視制作中又被稱之為寬高比，指的是一個視頻的寬度除以它的高度所得到的比例，通常表示為x:y或x×y，其中的冒號和叉號表示中文的“比”之意。目前，在電影工業中最常被使用的是anamorphic比例（即2.39:1）。傳統的4:3仍然被使用于現今的許多電視畫面上，而它成功的后繼規格16:9則被用于高清晰度電視或數字電視上。常見的比例：
使用CSS實現容器長寬比，常見的HTML模板結構有兩種：
<div class="aspectration" data-ratio="16:9">
<div class="content"></div>
</div>另外一種結構是：
<div class="aspectration" data-ratio="16:9"> </div>具體使用的時候，根據自己的使用場景采用不同的結構。
前面也提到過了，使用CSS實現長寬比方案有多種，下面簡單的羅列一下這些方案。不過每種方案都不會詳細介紹，因為代碼非常簡單，看一眼代碼就能明白其中原理。
這是最早提出的一種實現方案，主要借助的原理是利用padding-top或者padding-bottom的百分比值，實現容器長寬比。在CSS中padding-top或padding-bottom的百分比值是根據容器的width來計算的。如此一來就很好地實現了容器的長寬比。采用這種方法，需要把容器的height設置為0。而容器內容的所有元素都需要采用position:absolute，不然子元素內容都將被padding擠出容器（造成內容溢出）。
比如我們容器的長寬比是16:9，那么根據比例計算：100% * 9 / 16可以得到56.25%。如果你希望的是4:3，那么對應的就是100% * 3 / 4。
具體的CSS代碼如下：
.aspectration {
position: relative; /*因為容器所有子元素需要絕對定位*/
height: 0; /*容器高度是由padding來控制，盒模型原理告訴你一切*/
width: 100%;
}
.aspectration[data-ratio="16:9"] {
padding-top: 56.25%;
}
.aspectration[data-ratio="4:3"]{
padding-top: 75%;
}通過通配符*選擇器，讓其子元素的寬高和容器.aspectration一樣大小：
.aspectration > * {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}padding & calc()
這個方案采用的是padding和calc()配合在一起使用。其實原理和第一個方案是一樣的。只不過在第一個方案中，我們每次都需要對padding的值進行計算，如果使用calc()可以通過瀏覽器直接計算出padding的百分比值。
.aspectration[data-ratio="16:9"] {
padding-top: calc(100% * 9 / 16);
}padding & CSS變量
對于變量而言，以前是其他計算器語言和CSS處理器的特性，不過值得特性的是，現在也是CSS的特性。接下來的這個方案也是基于padding原理，只不過是借助于CSS變量特性，讓前面的方案變得更為靈活一些。使用CSS的變量時，可以把HTML中data-ratio去掉了。換成style="--aspect-ratio:16/9"，也可以是style="--aspect-ratio:1.4;"。同時也可以借助于第二個方案中的calc()。因為CSS的變量和calc()函數的結合是一種完美的結合。
.aspectration[style*="--aspect-ratio"] {
padding-top: calc(100% / (var(--aspect-ratio)));
}padding & 偽元素
前面的方案都是在.aspectration元素上使用padding值。但在CSS中，還可以使用CSS的偽元素::before或::after來撐開容器。
.aspectration {
position: relative;
}
.aspectration:after {
content: "";
display: block;
width: 1px;
margin-left: -1px;
background-color: orange;
}
.aspectration[data-ratio="16:9"]:after {
padding-top: 56.25%;
}
.content {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}CSS新特性中提供了一種新的單位vw。了解過這個單位的同學都知道，瀏覽器100vw表示的就是瀏覽器的視窗寬度(Viewport)。打個比方說，如果你的瀏覽器是1334px，那么對就的100vw = 1334px。這個時候也就是說1vw = 13.34px。這里的100vw也對應前面方案中的100%。這樣我們就可以把前面的%單位換成vw的單位。打個比方說，16:9對應的就是100vw * 9 / 16 = 56.25vw。這個值可以用在padding-top或者padding-bottom中。但這里演示的不再是padding了，而是把這個值給height。
.aspectration[data-ratio="16:9"] {
width: 100vw;
height: 56.25vw;
}上面的示例中width的值是30vw,那么對應的height值就是30vw * 9 / 16 = 16.875vw。
這是一個很有創意的解決方案，使用的都是CSS新特性：視窗單位和CSS Grid Layout。簡單說一下其中的實現原理：將容器.aspectration通過display:grid聲明為一個網格容器，并且利用repeat()將容器劃分為橫向比例，比如16，那么每一格的寬度對應的就是100vw * 9 / 16 = 6.25vw。同樣使用grid-auto-rows，將其設置的值和橫向的值一樣。在子元素上通過grid-column和grid-row按比例合并單元格。
.aspectration {
display: grid;
grid-template-columns: repeat(16, 6.25vw);
grid-auto-rows: 6.25vw;
}
.aspectration[data-ratio="16:9"] .content {
grid-column: span 16;
grid-row: span 9;
}在WICG的討論上，有人提出來了原生的長寬比屬性aspect-ratio。例如，給定一個容器元素它的width和height都設置為auto，并且aspect-ratio的值為2/1，max-height:200px。一個容器寬度為500px時，元素首先會設置width:500px，然后根據aspect-ratio比例將height設置為250px。這個時候其實違反了max-height的約束。相反，容器大小會變成height: 200px和width:400px。另外，如果元素的max-width是450px時，長寬比將會完全被忽視，因為無法滿足。
如果把width設置為一個百分比，高度不設置一個固定值:
.aspectration[data-ratio="16:9"] {
width: 100%;
height: aspect-ratio(16/9);
}現在討論討論趨勢是把aspect-ratio屬性值變成屬性，比如：
.aspectration[data-ratio="16:9"] {
width: 100%;
aspect-ratio: calc(16/9);
}到目前為止，還沒有任何瀏覽器支持該屬性，但我們可以借助PostCSS Aspect Ratio插件來實現上述的功能：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
