这里不说bootstrap和其他框架的自适应方案，仅用最基本的css属性来控制
使用自适应方案的前提：替换原有的网站位置控制思维
网址控制：
1. float /right
2. margin-*/pading-*
3. position:relative......
4. 100px , 20px.....
自适应思维：
1.抛弃上面四点的使用，改用坐标轴思维，这是从react中体会来的
2.用好display + %、rem + text-aligin、vertical-aligin 便可实现大多数自适应
3.父子关系控制思维
首先将父元素声明为单元格系统
display: table-cell;
这里以保证上下左右居中为例：给父元素添加 vertical-align: middle; text-align: center;
还有需要为最外层设置width ,这里的width需要一个px值，这样内嵌元素获取百分比才会有效，总结width就是，最外层设置px,最内部元素设置%
注意每一个相对父级都要添加display: table-cell,这是内部元素实现自适应的前提，实例代码如下
<div class="mui-content" style="background: transparent;width: 100%;text-align: center;">
<div style="display: table-cell;vertical-align: middle;text-align: center;display:inline;width: 100%;">
<div style="display: table-cell;padding: 1rem;">
<div style="display: table-cell;vertical-align: middle;text-align: center;width: 100px;height: 100px;border: 1px solid red;">
<img src="../../images/add.png" style="width:5rem;">
</div>
<button type="button" class="mui-btn mui-btn-blue mui-btn-block" style="width: 8rem;height: 4rem;background: #03F;display: inline-block;">你的图标</button>
</div>
<div style="display: table-cell;padding: 1rem;">
<div style="display: table-cell;vertical-align: middle;text-align: center;width: 100px;height: 100px;border: 1px solid red;">
<img src="../../images/add.png" style="width:5rem;">
</div>
<button type="button" class="mui-btn mui-btn-blue mui-btn-block" style="width: 8rem;height: 4rem;background: #03F;display: inline-block;">对方图标</button>
</div>
</div>
</div>
