常常遇到小白問怎麼適配的問題，我告訴你「不須要適配」

前言

說那麼沒用，下面代你們寫幾個移動端常見的一些東西，你們就知道了。固然掘金有一篇寫適配的文章好像很火，點進去看一下目錄其實我都會，說實話我第一個移動項目才考慮什麼適配。寫完後就發現適配個錘子。我的在羣裏也聽到很多次有人問怎麼適配移動端因此纔打算分享一下什麼叫不須要適配

事例佈局內容

----- 分割線r ------

事例一

• 效果圖

html

<div class="lesson1">
    <div class="lesson1-header">
      <div class="author-img"></div>
      <div class="author-content">
        Dell<br/><span>昨天：17:33</span>
      </div>
    </div>
    <p>前端面試題：若是讓你發起一個CSRF攻擊，你會怎麼作？</p>
    <div class="lesson1-footer">
      <div>0</div>
      <div>1</div>
      <div>分享</div>
    </div>
</div>
複製代碼

css

.lesson1{
      border: 1px solid #f6f6f4;
      padding: 15px;
    }
    .lesson1-header{
      display: flex;
    }
    .author-img{
      width: 40px;
      height: 40px;
      margin-right: 15px;
      border-radius: 50%;
      background: #ce7836;
    }
    .author-content>span{
      font-size: 12px;
      color: #ccc;
    }
    .lesson1-footer{
      display: flex;
      justify-content: space-between;
    }
複製代碼

你們能夠把代碼拷貝一下，本身到瀏覽器裏看看，用各類手機的型號的分辨率是否是效果都很理想。

事例二

那麼開始咱們的第二個事例。

• 素材

• 效果圖

  我特地在第一個中多加了幾個文字，我知道項目中文字長度不太理想是很正常的，這裏加了處理給小夥伴們參考

  

html

<div class="lesson2">
    <div class="lesson2-children">
      <div class="lesson2-item">
        <img src="./WX20190625-174444@2x.png"/>
        <p>多功能計步器計步器<br/><span>熱賣價23.0元</span></p>
      </div>
      <div class="lesson2-item">
        <img src="./WX20190625-174444@2x.png"/>
        <p>多功能計步器<br/><span>熱賣價23.0元</span></p>
      </div>
      <div class="lesson2-item">
        <img src="./WX20190625-174444@2x.png"/>
        <p>多功能計步器<br/><span>熱賣價23.0元</span></p>
      </div>
    </div>
    <div class="lesson2-children">
      <div class="lesson2-item">
        <img src="./WX20190625-174444@2x.png"/>
        <p>多功能計步器<br/><span>熱賣價23.0元</span></p>
      </div>
      <div class="lesson2-item">
        <img src="./WX20190625-174444@2x.png"/>
        <p>多功能計步器<br/><span>熱賣價23.0元</span></p>
      </div>
      <div class="lesson2-item">
        <img src="./WX20190625-174444@2x.png"/>
        <p>多功能計步器<br/><span>熱賣價23.0元</span></p>
      </div>
    </div>
  </div>
複製代碼

css

.lesson2-children{
      display: flex;
      justify-content: space-between;
    }
    .lesson2-item{
      text-align: center;
      width: 30%;
    }
    .lesson2-item>img{
      width: 100%;
    }
    .lesson2-item>p{
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
    .lesson2-item>p>span{
      font-size: 14px;
      color: #ccc;
    }
複製代碼

總結

是否是很簡單，如今就告訴哪些問你怎麼適配的人。適配個錘子哦適配。其實認真觀察，我基本沒給容器設置寬度，有也都是 百分比，好比圖片100% 多列布局的 30%。不要給容器設置 px rem em等單位纔是適配的重點，其餘都是扯淡