当前位置：首页 > Web前端 > HTML

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

时间：2023-04-03 01:04:25 HTML

1.使用easymock模拟数据和easymock链接地址2.自己写移动自适应布局widthgrid布局主要用rem写:html{/*相当于一个接口适配器，可以在pc上设置和移动终端*/font-size:37.5px;}.box,.box1,.box2{/*rem是适合移动开发的相对单位，相对根是html*/width:10rem;高度：3rem；背景色：红色；}.box1{背景颜色：蓝色；宽度：3rem；}.box2{宽度：7rem；背景色：粉色；}.box1,.box2{/*内联元素不能设置宽高*//*bug和side元素会有一些空隙比如换行符*/display:inline-block;}正文框的放置：

注意：此时，box1和box2之间需要没有空隙，即不能出现空格和换行符。如果是这样，它将无法自动适应布局要求。这可以通过代码本身来实现。效果图：放大后的效果：js实现掘金个人文章的简单移动布局：js框架界面布局：

使用jquery实现data获取并把通过级联设置得到的数据显示到前台：$.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').文本（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);})})```效果图：file:jquery文件版下载地址这次大概移动端到端的自适应学习分享就这些，希望看到小伙伴和学者一起学习并提出宝贵的建议

上一篇：Node.js源码中，为什么优先绑定ipv6？【精简知识】

下一篇：JavaScript高级程序设计（第三版）笔记

使用移动端自适应布局+easymock实现移动端界面的简单实现相关文章

最新推荐

猜你喜欢