首頁 >web前端 >css教學 >CSS的min-width怎麼使用

CSS的min-width怎麼使用

不言
不言原創
2018-11-23 10:46:284524瀏覽

min-width允許你設定元素的最小寬度,它經常與最大寬度的回應等一起使用,本篇文章我們就來看看CSS中min-width的具體使用方法。

我們先來看看什麼是min-width?

min-width屬性是允許設定元素的最小寬度。

如何使用min-width屬性?

例如,為了“讓我們可以輕鬆查看任何大小的瀏覽器”,假設你有一個元素可以創建響應式網站,可以將內容的寬度設定為width:30%;

如果在智慧型手機等的橫向小瀏覽器中看到的話,就變得比目標小,即使不特意利用媒體查詢來設定其他的值,也要用數值(px)來設定min -width,所以,實際尺寸不會小於該值。

我們來看一個特定的實例

如果將CSS套用到以下HTML,則減小瀏覽器的寬度將不會小於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; 
}

效果如下:

CSS的min-width怎麼使用

這篇文章到這裡就全部結束了,關於CSS中更多屬性的內容大家可以觀看php中文網的CSS影片教學學習! ! !

以上是CSS的min-width怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn