整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
咱們來看一組數據：
首頁頁面寬度 px：
Yahoo! 950
淘寶 950
MySpace 960
新浪 950
網易 960
Live Search 958
搜狐 950
優酷 960
AOL 960
上面列舉的都是Alexa全球排名前100的站點，它們的首頁寬度為950px/960px. 除了微軟的Live Search, 這些站點有個共同特點：頁面結構較復雜，都可以認為是門戶型網站。
再來看看Google, YouTube, Facebook, Flickr!, eBay等知名站點，它們的首頁寬度沒什么固定規律，共同的特點是：功能專一，頁面結構相對簡單。
根據上面的簡單分析可以認為：當搭建頁面結構復雜的門戶型網站時，開發工程師們不約而同地都選擇將頁面寬度定為950px/960px.
這是一件很有趣的事情，為什么要選擇這個寬度呢？這個寬度值究竟有什么魔力？
神奇的960
設計師們對蘋果情有獨衷。在 1024 x 768 的分辨率下，打開Firefox：
自然狀態下，Firefox窗體的大小約為 974 x 650. 減掉左右兩邊7px的邊框，網頁的實際大小為上圖中的紅色部分，高寬為 960 x 650.
有趣的960就這樣出現了。是的，可以認為一切就這么簡單。柵格系統最早出現在平面設計領域，設計師們愛用蘋果，蘋果下瀏覽器的默認寬度為960px, 于是960就這么“自然”地出現了。
數字背后的奧妙
上面的“自然”出現，細究自然是不讓人信服的。蘋果系統的設計者們在沒有喝醉酒的情況下選擇了960，而不是其它什么1000之類的整數，自然另有奧妙。
科學界有很多問題都可以歸結到數學問題上，我們也從數學著手：
960可以分解為2的6次方乘以3和5, 這使得960可以分割成以下寬度的整數倍：
2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40,48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480共26種（26=7 * 2 * 2 - 2, 減去2是去掉1和960自身），我們標記為：
N(960)=N(2^6 * 3 * 5)=26
根據上面的算法，可以得到：
N(360)=N(2^3 * 3^2 * 5)=22N(480)=N(2^5 * 3 * 5)=22N(720)=N(2^4 * 3^2 * 5)=28N(750)=N(2 * 3 * 5^3)=14N(800)=N(2^5 * 5^2)=16N(960)=N(2^6 * 3 * 5)=26N(1000)=N(2^3 * 5^3)=14N(1024)=N(2^10)=9N(1440)=N(2^6 * 3^2 * 5)=34N(1920)=N(2^7 * 3 * 5)=30
根據直覺（嚴格證明也不難，不過還是留給數學系的學生去證明吧），我們得到一個有趣的結論：
要使得N(width)較大，width的取值有兩個系列：
A系列： …, 320, 720, 1440, …
感覺有用的朋友，點個關注，給個收藏，就是對我堅持更新，最好的支持
常，我們希望限制元素相對于其父元素的寬度，同時使其具有動態性。因此，有一個基礎寬度或高度的能力，使其擴展的基礎上，可用的空間。比如說，我們有一個按鈕，它的寬度應該是最小的，不應該低于它的寬度。這就是最大和最小屬性變得方便的地方。
在本文中，我們將詳細介紹CSS的最大和最小寬度和高度屬性，并使用可能的用例和技巧詳細解釋每一個屬性。
首先要討論的是與寬度相關的屬性。我們有min-width和max-width，它們中的每一個都很重要，都有自己的用例。
設置min-width的值時，其好處在于防止width屬性使用的值變得小于min-width的指定值。 請注意，min-width的默認值是auto，它解析為0。
讓我們舉一個基本的例子來說明這一點。
我們有一個按鈕，里面有一個變化的文本。文本的范圍可能從一個單詞到多個單詞。為了確保即使只有一個單詞，它也有最小寬度，應該使用min-width。
最小寬度為100px，這樣即使按鈕的內容很短，比如Done，或者只有一個圖標，它仍然足夠大，可以被注意到。在使用阿拉伯語等多語言網站時，這一點非常重要。 考慮以下來自Twitter的示例：
在以前的情況下，按鈕上帶有單詞“??”，表示完成。 按鈕的寬度太小，因此在后面的案例中，我增加了它的最小寬度。
在內容較長的情況下，min-width可以擴展按鈕的寬度，而水平方向上的padding應該被添加，以實現一個合適的外觀按鈕。
在設置max-width值時，它的好處在于防止width屬性使用的值超過max-width的指定值。max-width的默認值是none。
max-width的常見且簡單的用例是將其與圖像一起使用。 考慮以下示例：
圖像比它的父元素大。通過使用max-width: 100%，圖像的寬度不會超過其父圖像的寬度。如果圖像比父圖像小，則max-width: 100%不會對圖像產生實際影響，因為它比父圖像小。
當min-width和max-width都用于一個元素時，它們中的哪一個將覆蓋另一個?換句話說，哪個優先級更高?
html
<div class="wrapper">
<div class="sub"></div>
</div>css
.sub {
width: 100px;
min-width: 50%;
max-width: 100%;
}初始width值為100px，并在其上加上min-width和max-width值。 結果是元素寬度未超過其包含的塊/父元素的50％。
除了最小和最大寬度屬性外，我們還具有與高度相同的屬性。
設置min-height的值時，其好處在于防止使用的height屬性值變得小于min-height的指定值。 請注意，最小高度的默認值為auto，它解析為0。
我們用一個簡單的例子來演示一下。
我們有一個帶有描述文本的部分。目標是為section設置一個最小高度，這樣它就可以處理短或長內容。考慮下面的基本情況
.sub {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
min-height: 100px;
color: #fff;
background: #3c78dB;
}最小高度為100px，使用flexbox時，內容水平和垂直居中。 如果內容更長，會發生什么？ 例如一段？
是的，你猜對了!section的高度將展開以包含新內容。有了它，我們就可以構建靈活的組件，并對其內容做出響應。
事例源碼:https://codepen.io/shadeed/pen/cfb600cf30acdae9cf6f9cb5347a37cf
在設置max-height值時，它的好處在于防止height屬性使用的值超過max-height的指定值。注意，max-height的默認值是none。
考慮下面的示例，其中我為內容設置了max-height。 但是，因為它大于指定的空間，所以會發生溢出。 因此，文本超出了其父邊界。
我們將介紹min-width，min-height，max-width和max-height的一些常見和不常見的用例。
當有一個標簽列表時，建議限制一個標簽的最小寬度，這樣如果它的內容很短，它的外觀就不會受到影響。
通過具有這種靈活性，無論內容有多短，標簽都將看起來不錯。 但是，如果內容作者輸入了一個非常長的標簽名稱，而他使用的內容管理系統沒有標簽的最大字符長度，將會發生什么情況呢？ 我們也可以使用max-width。
.c-tag {
display: inline-block;
min-width: 100px;
max-width: 250px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/*Other styles*/
}通過使用max-width，標簽寬度將被限制為特定值。 但是，這還不夠，標簽名稱應被截斷。
事例地址：https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16
對于按鈕的最小值和最大值有不同的用例，因為按鈕組件有多種變體。考慮下面的圖：
請注意，按鈕的“Get”寬度太小。 如果不設置最小寬度，則由于任何原因而沒有文本時，情況可能會變得更糟。 在這種情況下，設置最小寬度很重要。
min-width的默認值是auto，它被計算為0。當一個元素是一個flex項時，min-width的值不會計算為零。flex 項目的最小大小等于其內容的大小。
根據CSSWG：
默認情況下，flex項目不會縮小到它們的最小內容大小(最長單詞或固定大小元素的長度)以下。要更改此設置，請設置min-width或 min-height屬性。
考慮下面的例子
這個人的名字有一個很長的單詞，這導致了溢出和水平滾動。盡管如此，我還是在標題中添加了下面的CSS來截斷它
.c-person__name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}由于title是flex項目，因此解決方案是重置min-width并將其強制為零。
.c-person__name {
/*Other styles*/
min-width: 0;
}下面是修復后的樣子
根據CSSWG：
在彈性項目的主軸上可見溢出的項目上，當在彈性項目的主軸min-size屬性中指定時，指定自動最小尺寸。
意味著，將overflow設置為visible值以外的值會導致min-width被計算為0，這解決了我們不設置min-width: 0的問題。
事例源碼：https://codepen.io/shadeed/pen/398ccffcd437a2fb042f5ce3bdd68c57
雖然與min-width相比，這是一個不太常見的問題，但是它可能發生。 只是為了確認，問題與不能少于其內容的彈性項目有關。 結果min-height值被設置為與內容一樣長。
考慮以下示例：
用紅色表示的文本應該在父文本中裁剪。因為面板主體是一個flex項目，所以它的min-height與它的內容相等。為了防止這種情況，我們應該重新設置最小高度值。看看HTML和CSS是怎么樣的。
HTML
<div class="c-panel">
<h2 class="c-panel__title"><!-- Title --></h2>
<div class="c-panel__body">
<div class="c-panel__content"><!-- Content --></div>
</div>
</div>CSS
.c-panel {
display: flex;
flex-direction: column;
height: 180px;
}
.c-panel__body {
min-height: 0;
}
.c-panel__content {
overflow-y: scroll;
height: 100%;
}通過向面板主體添加min-height: 0，這將重置該屬性，并且現在應該可以正常工作。
事例源碼：https://codepen.io/shadeed/pen/dea75b84b1fcfd03e5c21173a40afc20?editors=0100
在某些情況下，我們有一個最小寬度的元素，但同時，它沒有最大寬度。這可能會導致組件太寬，而我們并不想這樣做。考慮以下示例
由于寬度是以像素為單位定義的，因此不能保證上面的方法適用于移動視口。為了解決這個問題，我們可以使用百分比來代替像素作為最小和最大屬性。考慮下面這個具有article主體的示例。
我為圖像添加了以下CSS：
img {
min-width: 35%;
max-width: 70%;
}事例源碼:https://codepen.io/shadeed/pen/11f49fd1a35ad06ce241bee17c3d3124
#### 頁面包裝器/容器
最常用的｀max-width｀用例之一是頁面包裝器或容器。通過向頁面添加最大寬度，我們可以確保內容對用戶來說是可讀的、易于瀏覽的。
下面是一個包裝器的例子，它是居中的，左右兩邊有水平的填充。
.wrapper {
max-width: 1170px;
padding-left: 16px;
padding-right: 16px;
margin-left: auto;
margin-right: auto;
}ch 是一個相對于數字0的大小，1ch 就是數字 0 的寬度。如定義一個3ch的寬度，那么就只能裝下 3個0。
<!-- HTML代碼 -->
<div>0000</div>
/* CSS代碼 */
div {
width: 3ch;
background: powderblue;
}在前面的wrapper元素示例中，我們可以利用ch單元，因為它是一個article 主體。
.wrapper {
max-width: 70ch;
/* Other styles */
}在某些情況下，我們面臨著使手風琴或移動菜單具有意想不到的內容高度的挑戰。在這種情況下，max-height可能是一個很好的解決方案。
請考慮以下示例：
單擊菜單按鈕后，菜單應隨動畫從上到下滑動。 如果沒有固定的高度（不建議這樣做），除非使用JavaScript，否則這是不可能的。 但是，對于max-height，這是可能的。 想法是為高度添加一個較大的值，例如max-height：20rem，可能無法達到，然后我們可以使用動畫從max-height: 0變換到max-height: 20rem。
.c-nav {
max-height: 0;
overflow: hidden;
transition: 0.3s linear;
}
.c-nav.is-active {
max-height: 22rem;
}點擊菜單按鈕可以看到動畫的運行。
事例源碼：https://codepen.io/shadeed/pen/164c7ef67f5d4541bddb8bc12b2772da
一般來說，我不喜歡給元素添加固定的高度。我覺得這樣做，會破壞流式布局的結構。但有些情況設置固定高度卻很有用。
考慮下面的例子，在這里我們有一個設置了固定高度的hero部分。
是，當內容較長時，它會溢出并離開hero包裝器，這可不太好。
為了預先解決這個問題，我們可以使用min-height來代替height。我們可以用這種方式先解決問題，盡管這可能會導致頁面看起來很奇怪，但是我認為應該首先防止內容管理系統(CMS)中發生這樣的事情。這樣，問題就解決了，看起來也不錯。
內容溢出的問題不僅在于內容是否大于固定的hero 高度。它可以發生在屏幕大小調整作為文本換行的結果。
如果改用min-height，則上述情況根本不會發生。
對于模態組件，它需要最小和最大寬度，以便可以適應移動設備到PC的屏幕上的適應。
思路1
.c-modal__body {
width: 600px;
max-width: 100%;
}思路2
.c-modal__body {
width: 100%;
max-width: 600px;
}對于我來說，我更喜歡第二個思路，因為我只需要定義max-width: 600px。modal是一個<div>元素，因此它已經具有其父元素的100％寬度，對嗎？
考慮下面為模態設計簡化的測試案例。 請注意，如果可用視口空間不足，則寬度如何更改為其父級的100％。
事例源碼：https://codepen.io/shadeed/pen/5dcb1c4c6773cc3a97a766c327c36443
當一個網站的內容不夠長，它希望看到頁腳粘到底部。讓我們用一個可視化的例子來更好地展示這一點。
請注意，頁腳未粘貼在瀏覽器窗口的末尾。 那是因為內容不足以達到瀏覽器窗口高度的長度。 修復后，其外觀應如下所示：
首先，將body元素作為flexbox容器，然后將其最小高度設置為視口高度的100％。
事例源碼：https://codepen.io/shadeed/pen/aeb14f2819b9cc4805275b88c2d55645?editors=1100
為了使比例容器能夠根據視口大小進行響應縮放，引入了padding hack。 現在，我們可以通過組合CSS中的視口單位和最大寬度/高度來模仿相同的行為。
我們有一個尺寸為644 * 1000像素的圖像。 為了使其流暢，我們需要以下內容：
人才們的 【三連】 就是小智不斷分享的最大動力，如果本篇博客有任何錯誤和建議，歡迎人才們留言，最后，謝謝大家的觀看。
作者：Ahmad shaded 譯者：前端小智 來源：sitepoint 原文：https://www.impressivewebs.com/min-max-width-height-css
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 端網頁設計寬度的設定介紹到這里就結束了，如果有什么疑問，可以在評論區留言。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
