写移动端怎么会不用到框架呢?

现在比较火的是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框架----移动端页面在所有屏幕下自适应的更多相关文章

  1. mui框架如何实现页面间传值

    mui框架如何实现页面间传值 我的传值 listDetail = '<li class="mui-table-view-cell mui-media>">< ...

  2. 移动端页面按手机屏幕分辨率自动缩放的js

    <script> var phoneWidth = parseInt(window.screen.width); var phoneHeight = parseInt(window.scr ...

  3. 跨平台移动端APP开发---简单高效的MUI框架

    MUI是dcloud(数字天堂)公司旗下的一款跨平台开发移动APP的框架产品,在学习MUI框架之前,最先接触了Hbuilder代码编辑器,它带给我的第一感觉是快,这是HBuilder的最大优势,通过完 ...

  4. MUI框架-02-注意事项-适用场景-实现页面间传值

    MUI框架-02-注意事项-适用场景-实现页面间传值 关于开发,我拷贝太多也没什么意义,就请查阅:官方文档:http://dev.dcloud.net.cn/mui/ui/ 快速入门 - 注意事项 有 ...

  5. mui框架(一)

    1.界面初始化 初始化就是把一切程序设为默认状态,把没准备的准备好. mui框架将很多功能配置都集中在mui.init方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可,目前支 ...

  6. 移动端 mui框架中input输入框或任何输入框聚焦后页面自动上移

    一.mui框架中点击input后,安卓手机弹出自带的输入键盘时,页面自动上移 实现方法: (1)只要把input标签放在mui-content这个类里面就可以了 <div class=" ...

  7. 初入APP(结合mui框架进行页面搭建)

      前  言 博主最近在接触移动APP,学习了几个小技巧,和大家分享一下. 1. 状态栏设置 现在打开绝大多数APP,状态栏都是与APP一体,不仅美观,而且与整体协调.博主是个中度强迫症患者,顶部那个 ...

  8. MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换

      概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...

  9. MUI框架-10-MUI 数据交互-跳转详情页面

    MUI框架-10-MUI 数据交互-跳转详情页面 上一篇介绍了如何实现数据交互,给别人的 API 发送 ajax 请求,我们得到数据,再使用 art-template 模板引擎拼接 HTML,最终实现 ...

随机推荐

  1. mysql安装及常见使用

    mysql的安装和使用 说明:mysql是一个多线程,多用户的sql数据库,有着高性能,高可靠性,易于实用性等特点. 安装的软件链接:https://pan.baidu.com/s/1smRLkoX ...

  2. liveshow回顾

    在2017年8月14号的一天接到一个即看即买的项目,大致功能如下 1.现场走秀直播同步到H5页面 2.实时显示直播间人数 3.点赞并实时显示给用户 4.在某个时间点,可以全体推送一些消息给所有用户 5 ...

  3. 工作整理: python报表系统常见错误整理

    1.一般收不到邮件是因为配置文件邮箱写错 2.如果报表数据不对,看数据插入的时候是否再次写入产生冲突 3.如果收不到报表某些组别的excel查看组别名称是否匹配正确,是否匹配成功,不成功无法发送

  4. 使用js对form表单base64加密

    利用js可以对前台数据加密,以防止被恶意获取,以下代码,用base64对数据进行加密,可以在后台进行解密. 引入的js <script type="text/javascript&qu ...

  5. 自定义MVC框架---第二章

    模型层的封装 模型层封装的原则 介绍: 模型层,也就是Model这一层,用来封装对数据库操作的封装 由于现在主流的编程思想还是OOP面向对象编程,也就是说项目的基本单位就是一个一个类文件,那么如何使用 ...

  6. LVS三种模式分析(超详细)

    1.DR模式:(Direct Routing)直接路由模式 DR模式的网络拓扑: DR模式的工作过程: 1.当一个client发送一个WEB请求到VIP,LVS服务器根据VIP选择对应的real-se ...

  7. [PHP] PHP源码常用代码中的宏定义

    PHP源码常用代码宏定义:#define 宏名 字符串#表示这是一条预处理命令,所有的预处理命令都以#开头.define是预处理命令.宏名是标识符的一种,命名规则和标识符相同.字符串可以是常数.表达式 ...

  8. Linux 系统下在线安装 Tomcat

    在linux下部署java开发的web应用,一般采用Tomact+jre环境(可不需要apache),在RHEL和CentOS下,可以采用yum在线自动安装方式安装,具体操作如下: 1.基础环境安装配 ...

  9. AtCoder Grand Contest 017

    noi前橙名计划失败.全程搞C而gg…… A - Biscuits 题意:背包,求价值为奇/偶的方案数. #include<cstdio> #include<queue> #i ...

  10. bzoj:1575: [Usaco2009 Jan]气象牛Baric

    Description 为了研究农场的气候,Betsy帮助农夫John做了N(1 <= N <= 100)次气压测量并按顺序记录了结果M_1...M_N(1 <= M_i <= ...