使用移動自適應布局+easy mock實現移動界面的簡單實現

Joyven 發布于2019-08-29 13:49 / 2737人閱讀

摘要：效果圖變大時效果實現掘金個人文章的簡單移動布局框架界面布局使用實現數據獲取和用級聯設置獲取的數據到前臺顯示獲取文章信息效果圖文件文件版本下載地址此次的關于移動端自適應學習和分享就是這些，望看到的伙伴和學者一起學習和提出你們寶貴的建議

一、使用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盒子的擺放：

注意:此時的box1和box2需要中間沒有縫隙也就是空格換行等都不能出現，如果出現則出現不能實現
自動適應布局的要求，這個可以用代碼自己實現一下效果。

效果圖：

變大時效果：

js實現掘金個人文章的簡單移動布局：

js框架

界面布局：

使用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);
        })
    })```

效果圖：

文件：

jquery文件版本下載地址

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

GPU云服務器云服務器移動端自適應自定義布局怎么實現 webrtc 移動端實現基于騰訊云實現移動直播

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112728.html

使用移動自適應布局+easy mock實現移動界面的簡單實現

摘要：效果圖變大時效果實現掘金個人文章的簡單移動布局框架界面布局使用實現數據獲取和用級聯設置獲取的數據到前臺顯示獲取文章信息效果圖文件文件版本下載地址此次的關于移動端自適應學習和分享就是這些，望看到的伙伴和學者一起學習和提出你們寶貴的建議一、使用easy mock模擬數據 showImg(https://segmentfault.com/img/bVYFhp?w=866&h=595); e...

hidogs 2019-08-21 17:40 評論0 收藏0
使用移動自適應布局+easy mock實現移動界面的簡單實現

摘要：效果圖變大時效果實現掘金個人文章的簡單移動布局框架界面布局使用實現數據獲取和用級聯設置獲取的數據到前臺顯示獲取文章信息效果圖文件文件版本下載地址此次的關于移動端自適應學習和分享就是這些，望看到的伙伴和學者一起學習和提出你們寶貴的建議一、使用easy mock模擬數據 showImg(https://segmentfault.com/img/bVYFhp?w=866&h=595); e...

Tangpj 2019-08-01 18:00 評論0 收藏0
APP測試的極簡Mock方法——Mock服務端接口

摘要：本文適用的場景在對移動端的純移動端功能或者前端頁面的純前端功能進行測試時，服務端接口返回的數據不滿足要求，或者制造測試數據比較復雜，需要使用方法來快速構造數據。進入官網后，首先創建一個項目，一個項目包含若干個接口，我們最終模擬的是接口。本文適用的場景：在對移動端APP的純移動端功能或者前端H5頁面的純前端功能進行測試時，服務端接口返回的數據不滿足要求，或者制造測試數據比較復雜，需要使...

godiscoder 2019-05-29 17:08 評論0 收藏0
從零搭建移動H5開發項目實戰

摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機制，在端上走的代碼，在端或者微信端上走端對應的代碼。對于一個從零開始的移動端項目，我總結了以上這些移動開發難點，希望之后的人能少踩點坑，站在我的肩膀上提高項目開發的效率和質量。從零搭建移動H5開發項目實戰前端H5的前世今身在Pc的時代，前端技術無疑統治了大多數用戶的交互界面！而在移動為王的今天，NA開發在早期占領了大多...

terro 2019-08-29 11:32 評論0 收藏0