動き適応型レイアウト+モバイルインタフェースのための簡単なモックの単純な実装を使用して

まず、アナログデータ簡単にモックの使用

簡単なモックリンクアドレス

第二に、自分の動き適応型のレイアウトを書きます

• 私は幅グリッドレイアウトを行い、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;
    }
  

• ボディは箱に入れ：

   <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のファイルのバージョンをダウンロード

適応学習上の移動が終了し、それらを共有して学び、前方にあなたのパートナーや学者との貴重な提案を見てほしい置くことです