一、使用easy mock模拟数据

二、自己写移动自适应布局

自己编写主要是利用rem进行宽度栅格布局：

 html {
      /* 相当于一个界面适配器，pc以及移动端都可以进行设置 */
      font-size: 37.5px;
  }

  .box, .box1, .box2 {
      /* rem为相对单位 适用于移动开发 相对于根源即为html */
      width: 10rem;
      height: 3rem;
      background-color: red;
  }

  .box1 {
      background-color: blue;
      width: 3rem;
  }

  .box2 {
      width: 7rem;
      background-color: pink;
  }
   .box1, .box2 {
       /* inline 元素不能设置宽高 */
       /* bug与旁边元素会有一些间隙 例如换行 */
       display: inline-block;
   }

body盒子的摆放：
```
  <div class="box"></div>
  <div class="box1"></div><div class="box2"></div>         
```
注意:此时的box1和box2需要中间没有缝隙也就是空格换行等都不能出现，如果出现则出现不能实现
自动适应布局的要求，这个可以用代码自己实现一下效果。
- 效果图：
  
  变大时效果：

#js实现掘金个人文章的简单移动布局：

js框架

   <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??    
   flexible_css.js,flexible.js"></script>

界面布局：

  <div id="app">
  <div class="authordmassage" id="authord">
      <img src="" alt="" class="authordphoto">
      <a href=""></a>
      <span id="authordid" class="authordidclass"></span>
      <span id="allcontent" class="allcontentclass"></span>
  </div>
  <div class="authorartical" id="mainlib">
      <ul>
          <li id="passageimage1">
              <img src="" alt="">
              <a href=""></a>
          </li>
          <li id="passageimage2" class="passageimage2">
              <img src="" alt="">
              <a href=""></a>
          </li>
      </ul>
  </div>
  </div>

使用jquery实现数据获取和用级联设置获取的数据到前台显示：

  ```$(function () {
      $.getJSON("http://www.easy-mock.com/mock/5a09aaeb7b68855a07f77882/ajaxWriterData/getWriterData", function (data) {
          console.log(data.data.passageImage.imageone);
          $('#authord').find('img').attr('src', data.data.author.avatar);
          $('#authord').find('a').text(data.data.author.authorname);
          $('#authord').find('#authordid').text(data.data.author.authorID);
          $('#authord').find('#allcontent').text(data.data.author.allcontent);
          // console.log($('#mainlib').find('ul').find('li').find('#passageimage1'));
          //获取文章信息
          $('#mainlib').find('ul').find('#passageimage1').find('a').text(data.data.artical[0].title);
          $('#mainlib').find('ul').find('#passageimage1').find('img').attr('src', data.data.passageImage.imageone);
          $('#mainlib').find('ul').find('#passageimage2').find('a').text(data.data.artical[1].title);
          $('#mainlib').find('ul').find('#passageimage2').find('img').attr('src', data.data.passageImage.imagetwo);
          })
      })```

效果图：

   ![clipboard.png](/img/bVYFCd)

文件：
```
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
 [jquery文件版本下载地址][2]    
```
此次的关于移动端自适应学习和分享就是这些，望看到的伙伴和学者一起学习和提出你们宝贵的建议