Summarize the use of the minimum width min-width and maximum width Max-width property in CSS

The CSS Width property is the word width, Width breadth contains two important attributes: Maximum Width property max-width and minimum Width property min-width. The Maximum Width property (max-width) is used to define the maximum width display, when dragging the browser border so that its display range is greater than the maximum width, element Displays the width defined by the maximum width value. In the maximum width attribute value, you can use three property values, auto value, length value, and percent value, respectively; The minimum Width property (min-width) is used to define the minimum value of the width display, and when the browser border is dragged so that its display range is less than the minimum width, the element displays The minimum width value defines the width, in the minimum width attribute, you can use three property values, respectively, auto, length, and percent values. This article summarizes the use of the two properties, Max-width and Min-width.

Use of Min-width and Max-width properties

1. Compatible with IE6 Min-width, min-height

If a station is widescreen, you drag the browser window width will change with the size of the window, and the width of the browser window to a certain extent will appear below the scroll bar, the site width will not be reduced, we know this simple function with CSS min-width is easy to achieve, Unfortunately, we have a lot of users of the IE6 does not support this very convenient property, how to do it, we just add the following CSS statements in the design of the Web page can be resolved.

2. Detailed explanation of the relationship between @media attributes and (max-width:) and (min-width) and usage

Width/height defines the width/height of the page visible area in the output device.

Max/min-width/height defines the maximum/small visible area width/height of the page in the output device.

Device-width/height defines the screen visible width/height of the output device.

Max/min-device-width/height defines the screen maximum/small visible width/height of the output device.

3. CSS Layout Learning notes Max-width

Setting the width of a block-level element prevents it from left to right by filling the container. Then you can set the left and right margin to auto to center it horizontally. The element occupies the width you specify, and then the remaining width is split into 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 hold the page. in this case, using max-width instead of width allows the browser to better handle the case of small windows.

4. jquery to achieve proportional scaling of pictures and max-width in IE incompatible resolution

In the processing of Web page pictures, especially in the application of some picture list, it is difficult to guarantee the uniform size of the picture, directly set the image size will cause the picture to stretch, resulting in blurred images, the code described in this article can be automatically scaled after the picture is loaded. Max-width and Max-height are incompatible in IE6, and jquery solves these problems.

5. Let IE6 support min-width minimum width

Believe that many people in this method to achieve the smallest container width is often confused by the crash, there are two points to point out: 1. Ie6-'s standard mode and quirk mode are different for the elements of the viewport, the former is

Related questions

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

2. Ask what the difference is between Max-width and Max-device-width.

3. Problems with Max-width Invalid CSS

"Recommended"

1. PHP Chinese entry: min-width

2. PHP Chinese entry: max-width

3. PHP Chinese Web free video tutorial: CSS video Tutorial