How to use CSS min-width

min-width allows you to set the minimum width of an element. It is often used together with the maximum width response. In this article, we will take a look at the specific use of min-width in CSS.

Let’s first take a look at what is min-width?

The min-width attribute allows you to set the minimum width of an element.

How to use min-width attribute?

For example, to "allow us to easily view any size browser", assuming you have an element to create a responsive website, you can set the width of the content to width: 30%;

If you see it in a small horizontal browser such as a smartphone, it will become smaller than the target. Even if you do not specifically use media queries to set other values, you must use a numerical value (px) to set min. -width, so the actual size will not be smaller than this value.

Let’s look at a specific example

If CSS is applied to the following HTML, reducing the width of the browser will not be smaller than the width specified by max-width .

HTML

 <div class ="container"> 
  <div class ="box"> 
    <p>请尝试更改浏览器宽度。<br> min-width：200px;已经设置，它
    不会小于200px。</p> 
  </div>

CSS

.box{
  width: 30%;
  height: 200px;
  min-width: 200px;
  background-color: #66b6d5; 
}

The effect is as follows:

This article ends here, For more information about properties in CSS, you can watch the CSS video tutorial on the php Chinese website to learn! ! !

The above is the detailed content of How to use CSS min-width. For more information, please follow other related articles on the PHP Chinese website!