国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用移動自適應布局+easy mock實現(xiàn)移動界面的簡單實現(xiàn)

hidogs / 3066人閱讀

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

一、使用easy mock模擬數(shù)據(jù)

easy mock鏈接地址

二、自己寫移動自適應布局

自己編寫主要是利用rem進行寬度柵格布局：

html {
     /* 相當于一個界面適配器，pc以及移動端都可以進行設(shè)置 */
     font-size: 37.5px;
 }

 .box, .box1, .box2 {
     /* rem為相對單位 適用于移動開發(fā) 相對于根源即為html */
     width: 10rem;
     height: 3rem;
     background-color: red;
 }

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

 .box2 {
     width: 7rem;
     background-color: pink;
 }
  .box1, .box2 {
      /* inline 元素不能設(shè)置寬高 */
      /* bug與旁邊元素會有一些間隙 例如換行 */
      display: inline-block;
  }

body盒子的擺放：

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

效果圖：

變大時效果：

js實現(xiàn)掘金個人文章的簡單移動布局：

js框架

界面布局：




    
    
    
    




    
    
        
  • 
            
            
        
    • 
        
  • 
            
            
        
    •

使用jquery實現(xiàn)數(shù)據(jù)獲取和用級聯(lián)設(shè)置獲取的數(shù)據(jù)到前臺顯示：

    $.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文件版本下載地址

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/89855.html

相關(guān)文章

  • 使用移動自適應布局+easy mock實現(xiàn)移動界面的簡單實現(xiàn)

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

    Tangpj 評論0 收藏0

  • 使用移動自適應布局+easy mock實現(xiàn)移動界面的簡單實現(xiàn)

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

    Joyven 評論0 收藏0

  • APP測試的極簡Mock方法——Mock服務(wù)端接口

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

    godiscoder 評論0 收藏0

  • 從零搭建移動H5開發(fā)項目實戰(zhàn)

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

    terro 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<