使用移动自适应布局+easy mock实现移动界面的简单实现
2024-09-04 01:56:19
一、使用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盒子的摆放:
<div class="box"></div>
<div class="box1"></div><div class="box2"></div>注意:此时的box1和box2需要中间没有缝隙也就是空格换行等都不能出现,如果出现则出现不能实现
自动适应布局的要求,这个可以用代码自己实现一下效果。效果图:
变大时效果:
js实现掘金个人文章的简单移动布局:
js框架
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??
flexible_css.js,flexible.js"></script>
界面布局:
<div id="app">
<div class="authordmassage" id="authord">
<img src="" alt="" class="authordphoto">
<a href=""></a>
<span id="authordid" class="authordidclass"></span>
<span id="allcontent" class="allcontentclass"></span>
</div>
<div class="authorartical" id="mainlib">
<ul>
<li id="passageimage1">
<img src="" alt="">
<a href=""></a>
</li>
<li id="passageimage2" class="passageimage2">
<img src="" alt="">
<a href=""></a>
</li>
</ul>
</div>
</div>
使用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);
})
})```效果图:
文件:
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
此次的关于移动端自适应学习和分享就是这些,望看到的伙伴和学者一起学习和提出你们宝贵的建议
最新文章
- 使用 AForge.NET 做视频采集
- Git学习笔记(6)——Bug和Feature分支
- Dagger2 生成代码学习
- paip..禁用mmseg 的默认词库. . 仅仅使用自定义词库from数据库.
- 夺命雷公狗---Thinkphp----1之目录介绍
- (09)odoo工作流
- TCP/IP协议详解内容总结
- mvc razor页面的邮箱校验
- zeromq源码分析笔记之准备(0)
- 开发框架(WinForm)3
- 深入React事件系统(React点击空白部分隐藏弹出层;React阻止事件冒泡失效)
- 洛谷P1066 2^k进制数(题解)(递推版)
- WPF获取当前用户控件的父级窗体
- linux下查看运行进程详细信息
- 完美解决ubuntu下sublime中文输入问题
- [python]记录Windows下安装matplot的经历
- PAT甲题题解-1114. Family Property (25)-(并查集模板题)
- Python3.5 执行发邮件Exchangelib(=)
- configure: error: libpam required but missing
- Android开发之Navigationdrawer导航抽屉功能的实现(源码分享)
热门文章
- Canal监控Mysql同步到Redis(菜鸟也能搭建)
- 网站TDK三大标签SEO优化
- MySQL表与表的关系
- C#结构体的使用
- peewee 对 mysql 类型支持问题,并不支持bit
- life|October the 1st| five twenty|three–fifths|1970s|30s
- 吴裕雄--天生自然Android开发学习:1.2.2 使用Android Studio开发Android APP
- win10安装inventor失败,怎么强力卸载删除注册表并重新安装
- iOS应用程序开发——解决iOS7之前版本与之后版本下app启动图片跳动问题
- [LC] 230. Kth Smallest Element in a BST