MDUI标准响应式布局写法
2018-01-14 本文已影响1410人
Hi小胡
效果：
PC：
Mobile：
代码：
html：
<body class="mdui-drawer-body-left mdui-appbar-with-toolbar mdui-theme-primary-indigo">
<!-- 头部 -->
<header class="mdui-appbar mdui-appbar-fixed" id="content-header">
<div class="mdui-toolbar mdui-color-theme">
<span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-drawer="{target: '#content-drawer', swipe: true}"><i class="mdui-icon material-icons">menu</i></span>
<a href="" class="mdui-typo-headline mdui-hidden-xs">标题</a>
<a href="" class="mdui-typo-title">子标题</a>
<div class="mdui-toolbar-spacer"></div>
<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">refresh</i></a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">more_vert</i></a>
</div>
</header>
<!-- 侧边栏 -->
<div class="mdui-drawer" id="content-drawer">
侧边栏
</div>
<!-- 内容 -->
<div class="mdui-container" id="content-main">
内容
</div>
<!-- 尾部 -->
<div class="mdui-color-theme" id="content-footer">Copyright</div>
</body>
css：
.dialog-content {
padding: 30px;
}
#content-drawer {
padding: 20px;
background: skyblue;
font-size: 50px;
color:#fff;
}
#content-main {
padding: 20px;
width: 100%;
height: 700px;
background: tomato;
font-size: 50px;
color:#fff;
}
#content-footer {
padding: 30px;
}
