使用移动自适应布局+easy mock实现移动界面的简单实现

一、使用easy mock模拟数据

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实现数据获取和用级联设置获取的数据到前台显示：

      $.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);
          })
      })```

• 效果图：

  

• 文件：

  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

  jquery文件版本下载地址

此次的关于移动端自适应学习和分享就是这些，望看到的伙伴和学者一起学习和提出你们宝贵的建议