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

來源:互聯網
上載者:User
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模式下代表視口的元素是不一樣的,前者為<html>,後者則為<body>; 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視頻教程

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.