使用mui框架----移动端页面在所有屏幕下自适应
写移动端怎么会不用到框架呢?
现在比较火的是mui、amaze UI 之类的,mui是现在最灵活轻便的一个框架,能够从pc到移动灵活的自适应,
只需要调用他定义的类名就能使用,非常方便,只是需要自己来查找、更改样式
页面如下

head标签内引入mui css 、mui js
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<link href="css/个人订单.css" rel="stylesheet" />
<script src="js/mui.min.js"></script>
html(mui框架以mui-为固定命名,使用的是grid栅格系统,全部内容使用mui-content包裹)
mui-col-sm-12:在<400的屏幕下站12格满屏;
mui-col-xs-12:在>400的屏幕下占12格满屏;

nav菜单

内容 在大屏和小屏都占12格,永远是自适应

使用mui框架----移动端页面在所有屏幕下自适应的更多相关文章
- mui框架如何实现页面间传值
mui框架如何实现页面间传值 我的传值 listDetail = '<li class="mui-table-view-cell mui-media>">< ...
- 移动端页面按手机屏幕分辨率自动缩放的js
<script> var phoneWidth = parseInt(window.screen.width); var phoneHeight = parseInt(window.scr ...
- 跨平台移动端APP开发---简单高效的MUI框架
MUI是dcloud(数字天堂)公司旗下的一款跨平台开发移动APP的框架产品,在学习MUI框架之前,最先接触了Hbuilder代码编辑器,它带给我的第一感觉是快,这是HBuilder的最大优势,通过完 ...
- MUI框架-02-注意事项-适用场景-实现页面间传值
MUI框架-02-注意事项-适用场景-实现页面间传值 关于开发,我拷贝太多也没什么意义,就请查阅:官方文档:http://dev.dcloud.net.cn/mui/ui/ 快速入门 - 注意事项 有 ...
- mui框架(一)
1.界面初始化 初始化就是把一切程序设为默认状态,把没准备的准备好. mui框架将很多功能配置都集中在mui.init方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可,目前支 ...
- 移动端 mui框架中input输入框或任何输入框聚焦后页面自动上移
一.mui框架中点击input后,安卓手机弹出自带的输入键盘时,页面自动上移 实现方法: (1)只要把input标签放在mui-content这个类里面就可以了 <div class=" ...
- 初入APP(结合mui框架进行页面搭建)
前 言 博主最近在接触移动APP,学习了几个小技巧,和大家分享一下. 1. 状态栏设置 现在打开绝大多数APP,状态栏都是与APP一体,不仅美观,而且与整体协调.博主是个中度强迫症患者,顶部那个 ...
- MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换
概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...
- MUI框架-10-MUI 数据交互-跳转详情页面
MUI框架-10-MUI 数据交互-跳转详情页面 上一篇介绍了如何实现数据交互,给别人的 API 发送 ajax 请求,我们得到数据,再使用 art-template 模板引擎拼接 HTML,最终实现 ...
随机推荐
- [代码审计]青云客Cms前台有条件注入至getshell,后台xss至getshell、至弹你一脸计算器
之前写了一篇关于青云客cms的文章,发在了t00ls,就不copy过来了. 给个链接,好记录一下. https://www.t00ls.net/thread-43093-1-1.html
- 平衡树Treap模板与原理
这次我们来讲一讲Treap(splay以后再更) 平衡树是一种排序二叉树(或二叉搜索树),所以排序二叉树可以迅速地判断两个值的大小,当然操作肯定不止那么多(不然我们还学什么). 而平衡树在排序二叉树的 ...
- Qt 地址薄 (二) 添加地址
在上一篇 Qt 地址薄 (一) 界面设计 中,主要是实现了地址簿的界面,使用布局管理器进行元素的布局,并解释了"子类化" 和"所有权"的概念. 本篇将在上面的基 ...
- 管理 MariaDB 用户账户
哪些用户可以连接到MariaDB 服务器,他们都可以从哪些地方连接,连接到服务器后又能够做什么等,都是本文将涉及到的内容. 用户的权限信息都保存在 mysql 库中的几个权限表中.对 MariaDB ...
- JavaScrip:Function函数编程
自定义函数定义 1.函数通过function关键字创建,函数创建格式: function 函数名称([参数,...]){ 代码段; return 返回值; } 注意事项: 函数名称不要包含特殊字符 函 ...
- 将控制台信息显示在前台页面的js插件
在拿出插件之前,先回顾一下apply()的用法,这里和call()做比较. JavaScript中的每一个Function对象都有一个apply()方法和一个call()方法,它们的语法分别为: /* ...
- JS 生成唯一数字
如题,在JS中,利用Date.getTime()来生成唯一数字,用于ID function uniqueNumber() { var date = Date.now(); if (date <= ...
- hash算法 (hashmap 实现原理)
Hash ,一般翻译做" 散列" ,也有直接音译为" 哈希" 的,就是把任意长度的输入(又叫做预映射, pre-image),通过散列算法,变换成固定长度的输出 ...
- IDEA的破解安装以及汉化
IDEA是一款比eclipse用起来更好用的一款代码编辑器,本人之前也是一直在用eclipse来写代码,后来发现了IDEA用起来会更顺手,所以又转用IDEA了,今天给大家分享一下IDEA的下载安装破解 ...
- [国嵌攻略][154][Linux-I2C子系统]
IIC子系统架构 device driver层: 1.device driver,由用户开发. 2.i2c-dev由内核实现,但是需要配合应用模式驱动才能使用. i2c core层: 1.总线驱动,也 ...