html自適應界面

---

學習過bootStarp之后，一直最自適應布局很感興趣，尤其是BootStarp的柵格系統，所以做了一個html小demo，來記錄一下自適應的過程

重要的css屬性 彈性盒子

• display:flex;
• flex-wrap:wrap;
• justify-content:center;

接下來看一段代碼

<!-- html -->
<div class="container">
  <div class="service-box">
      <div class="service-icon">
          <i class="fa fa-window-restore"></i>
        </div>
      <div class="service-title">
          <span>網站商品管理</span>
      </div>
      <div class="service-desc">
          <span>這是管理網站所有商品功能，在這里可以管理用戶上架的所有商品</span>
      </div>
  </div>
</div>
<!-- css -->
<style>
.container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.service-box{
  max-width: 33.33%;
  padding: 10px;
  text-align: center;
  cursor: pointer;
}
</style>

這是沒有加彈性盒子的效果

這是加了彈性盒子的效果 [注意:這里截圖的時候屏幕尺寸小於960px]

分析原因
在我看來,這個彈性盒子其實就是讓子類可以像是block一樣排列起來,並且子類的max-width的百分比決定着他們一排能排幾個

重要的屬性 @media and screen(max-width:960px)

這個語句的意思是 如果屏幕尺寸小於960px那么就執行下面的代碼

這個語句由一個前提,那就是這一定是個html:5文件

<!-- html5 必須的屬性 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

下面看一下實例

承接上面的css代碼

@media screen and (max-width:960px) {
  .service-box{
    max-width: 45%;
  }
}

因為盒子最大是占據45%,也就是一行只能兩行,就能看到上面的圖的情況,正常來說,如果用電腦打開那個網頁的話,一行會出現三個盒子的