使用移動(dòng)自適應(yīng)布局+easy mock實(shí)現(xiàn)移動(dòng)界面的簡單實(shí)現(xiàn)

Joyven 發(fā)布于2019-08-29 13:49 / 2742人閱讀

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

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

easy mock鏈接地址

二、自己寫移動(dòng)自適應(yīng)布局

自己編寫主要是利用rem進(jìn)行寬度柵格布局：

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

 .box, .box1, .box2 {
     /* rem為相對(duì)單位 適用于移動(dòng)開發(fā) 相對(duì)于根源即為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與旁邊元素會(huì)有一些間隙 例如換行 */
      display: inline-block;
  }

body盒子的擺放：

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

效果圖：

變大時(shí)效果：

js實(shí)現(xiàn)掘金個(gè)人文章的簡單移動(dòng)布局：

js框架

界面布局：

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

    $.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)于移動(dòng)端自適應(yīng)學(xué)習(xí)和分享就是這些，望看到的伙伴和學(xué)者一起學(xué)習(xí)和提出你們寶貴的建議

云服務(wù)器 GPU云服務(wù)器移動(dòng)端自適應(yīng) 自定義布局怎么實(shí)現(xiàn) webrtc 移動(dòng)端實(shí)現(xiàn) 基于騰訊云實(shí)現(xiàn)移動(dòng)直播

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112728.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Joyven

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Powershell 安裝不同文件格式的方法記錄

閱讀 672·2021-11-24 09:39
SSL證書為什么會(huì)有有效期？如何有效避免SSL證書過期？

閱讀 2341·2021-11-22 13:54
RackNerd：美國便宜VPS促銷，AMD Ryzen 3900X CPU，NVMe SSD硬盤，

閱讀 2209·2021-09-23 11:46
HTML5的離線存儲(chǔ)

閱讀 3253·2019-08-30 15:55
css--圖片廊

閱讀 2690·2019-08-30 15:54
5.React中組件通信問題

閱讀 2413·2019-08-30 14:18
使用 CSS 追蹤用戶

閱讀 1553·2019-08-29 14:15
使用移動(dòng)自適應(yīng)布局+easy mock實(shí)現(xiàn)移動(dòng)界面的簡單實(shí)現(xiàn)

閱讀 2743·2019-08-29 13:49

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

使用移動(dòng)自適應(yīng)布局+easy mock實(shí)現(xiàn)移動(dòng)界面的簡單實(shí)現(xiàn)

相關(guān)文章