css自适应手机，pc方案

这里不说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>