常常遇到小白问怎么适配的问题，我告诉你“不须要适配”

前言

说那么没用，下面代你们写几个移动端常见的一些东西，你们就知道了。固然掘金有一篇写适配的文章好像很火，点进去看一下目录其实我都会，说实话我第一个移动项目才考虑什么适配。写完后就发现适配个锤子。我的在群里也听到很多次有人问怎么适配移动端因此才打算分享一下什么叫不须要适配

事例布局内容

----- 分割线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等单位才是适配的重点，其余都是扯淡