使用移动自适应布局+easy mock实现移动界面的简单实现

Tangpj 发布于2019-08-01 18:00 / 524人阅读

摘要：效果图变大时效果实现掘金个人文章的简单移动布局框架界面布局使用实现数据获取和用级联设置获取的数据到前台显示获取文章信息效果图文件文件版本下载地址此次的关于移动端自适应学习和分享就是这些，望看到的伙伴和学者一起学习和提出你们宝贵的建议

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

此次的关于移动端自适应学习和分享就是这些，望看到的伙伴和学者一起学习和提出你们宝贵的建议

私有云海外云主机移动端自适应自定义布局怎么实现 webrtc 移动端实现基于腾讯云实现移动直播

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51514.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...

Joyven 2019-08-29 13:49 评论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