一、使用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文件版本下載地址

此次的關于移動端自適應學習和分享就是這些，望看到的伙伴和學者一起學習和提出你們寶貴的建議

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的使用移动自适应布局+easy mock实现移动界面的简单实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。