總結css中最小寬度min-width和最大寬度max-width屬性的使用方法

CSS寬度屬性為單字width，寬度width包含了兩個重要的屬性：最大寬度屬性max-width和最小寬度屬性min-width。 最大寬度屬性(max-width)用來定義寬度顯示的最大值，當拖曳瀏覽器邊框使其顯示範圍大於最大寬度的時候，元素顯示最大寬度值定義的寬度。在最大寬度屬性值中，可以使用三種屬性值，分別為auto值、長度值和百分比值；最小寬度屬性(min-width)用來定義寬度顯示的最小值，當拖動瀏覽器邊框使其顯示範圍小於最小寬度的時候，元素顯示最小寬度值定義的寬度，在最小寬度屬性中，可以使用三種屬性值，分別為auto值、長度值和百分比值。本文將對max-width和min-width這兩種屬性的使用做一些總結。

min-width與max-width屬性的使用

##1.

 相容IE6的min-width、min-height

如果一個站是寬螢幕的，你左右拖曳瀏覽器的視窗網站寬度會隨著視窗的大小而改變，而瀏覽器窗口寬度減少到一定程度後就會出現下邊的滾動條，網站寬度就不會再減小了，我們知道這一簡單的功能用css的min-width就很容易能實現，但不幸的是，我們使用者很多的IE6不支援這個非常方便的屬性，怎麼辦呢，我們只要在網頁設計時加上下面的css語句就能解決。

2. 

詳細解釋@media 屬性與(max-width:) and (min-width) 之間的關係及用法

width/height 定義輸出設備中的頁面可見區域寬度/高度。

max/min-width/height 定義輸出裝置中的頁面最大/小可見區域寬度/高度。

device-width/height 定義輸出裝置的螢幕可見寬/高度。

max/min-device-width/height 定義輸出裝置的螢幕最大/小可見寬/高度。

3. 

css佈局學習筆記之max-width

#設定區塊級元素的 width 可以阻止它從左到右撐滿容器。然後你就可以設定左右外邊距為 auto 來使其水平居中。元素會佔據你所指定的寬度，然後剩餘的寬度會一分為二成為左右外邊距。

唯一的問題是，當瀏覽器視窗比元素的寬度還要窄時，瀏覽器會顯示一個水平捲軸來容納頁面。

在這種情況下使用 max-width 取代 width 可以讓瀏覽器更好地處理小視窗的情況。

4. jquery實現圖片等比例縮放以及max-width在ie中不相容地解決

在處理網頁圖片時,特別是一些圖片列表的應用裡面,很難保證圖片統一大小,直接設置圖片大小又會導致圖片拉伸,造成圖片模糊,本文介紹的代碼可以在圖片加載完成後自動按比例調整圖片大小。 max-width和max-height在ie6中不相容問題，用jQuery就解決了這些問題 。

5. 讓IE6支援min-width最小寬度

相信許多人在用這個方法實作容器最小寬度時都時常會被莫名其妙的死機所困擾，這裡有兩點需要指出：1. IE6-的標準模式下和quirk模式下代表視口的元素是不一樣的，前者為，後者則為

； 2. IE6-在以上兩種不同的模式下，其對包含內容溢出時的不同表現形式，從而導致了賦值判斷上的死循環。

相關問答

1. 

@media screen and (min-width:800px)

2. 

問max-width和max-device-width有什麼差別啊

3. 

關於css的max-width 無效的問題

【相關推薦】

1. php中文網詞條： 

min-width#

2. php中文網詞條：  max-width

#3. php中文網免費影片教學：CSS影片教學

以上是總結css中最小寬度min-width和最大寬度max-width屬性的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！