Summarize the use of the minimum width min-width and maximum width max-width attributes in CSS

CSS width attribute is the word width, and width width includes two important attributes: the maximum width attribute max-width and the minimum width attribute min-width. The maximum width attribute (max-width) is used to define the maximum value of the width display. When the browser border is dragged to make the display range larger than the maximum width, the element displays the width defined by the maximum width value. . In the maximum width attribute value, three attribute values ​​can be used, namely auto value, length value and percentage value; Minimum width attribute (min-width) is used to define the minimum value of the width display. When dragging When the browser border is moved to make the display range smaller than the minimum width, the element displays the width defined by the minimum width value. In the minimum width attribute, three attribute values ​​can be used, namely auto value, length value and Percent value. This article will summarize the use of the two attributes max-width and min-width.

##Usage of min-width and max-width attributes##1.

Compatible with IE6's min-width, min-height

If a site is widescreen, and you drag the browser window left or right, the width of the website will change with the size of the window, and the browser window After the width is reduced to a certain extent, the scroll bar below will appear, and the website width will no longer be reduced. We know that this simple function can be easily achieved using the min-width of CSS, but unfortunately, we IE6, which has many users, does not support this very convenient attribute. What should we do? We can solve it by just adding the following css statement when designing the web page.

2.

Explain in detail the relationship and usage between the @media attribute and (max-width:) and (min-width)

width/height defines the output device The width/height of the visible area of ​​the page.

max/min-width/height Defines the maximum/minimum visible area width/height of the page in the output device.

device-width/height Defines the visible screen width/height of the output device.

max/min-device-width/height Defines the maximum/minimum visible width/height of the screen of the output device.

3.

css layout study notes max-width

Setting the width of a block-level element can prevent it from filling the container from left to right. Then you can set the left and right margins to auto to center it horizontally. The element will occupy the width you specify, and then the remaining width will be split into two left and right margins.

The only problem is that when the browser window is narrower than the width of the element, the browser displays a horizontal scroll bar to accommodate the page.

Using max-width instead of width in this case allows the browser to better handle small windows.

4.

jquery implements image scaling and max-width is not compatible in ie to solve

is being processed When loading images on web pages, especially in some image list applications, it is difficult to ensure that the images are of uniform size. Directly setting the image size will cause the image to stretch and blur the image. The code introduced in this article can automatically adjust the image proportionally after the image is loaded. size. Max-width and max-height are incompatible in ie6. These problems can be solved with jQuery.

5.

Let IE6 support min-width minimum width

I believe many people are using this method to minimize the container Width is often troubled by inexplicable crashes. There are two points that need to be pointed out: 1. The elements representing the viewport in IE6-'s standard mode and quirk mode are different. The former is , and the latter Then it is ; 2. IE6-In the above two different modes, it has different expressions when the contained content overflows, which leads to an infinite loop in the assignment judgment.

Related Questions and Answers1.

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

2.

Ask what is the difference between max-width and max-device-width

3.

About the invalid max-width of css

【Related recommendations】

1. PHP Chinese website entry:

min-width

2. PHP Chinese website entry: max-width

3. PHP Chinese website free video tutorial: CSS video tutorial

The above is the detailed content of Summarize the use of the minimum width min-width and maximum width max-width attributes in CSS. For more information, please follow other related articles on the PHP Chinese website!