移动端适配方案

移动端适配方案

首先，简单说明下关于px，em，rem之间的简单区别
px：是元素固定的像素单位
em：只和自身的font-size相关，1em等同于1倍自身的字号大小
如下图：

 #outer{
            font-size: 30px;
            /*90px em单位和自身的font-size相关*/
            width: 3em;
            height: 100px;
            background-color: red;
        }
        元素字号大小为30px，元素宽度设置为3em，通过控制台盒模型可以看到元素宽度为90px
        即元素自身宽度，1em和字号大小是1比1
       

rem：只和根元素HTML的字号大小相关，1rem等同于1倍的HTML根元素的字号大小

 html{
            font-size: 20px;
        }
        #inner{
            font-size: 40px;
            width: 2rem;//40px
            height: 100px;
            background-color: pink;
        }
      当根元素font-size为20px时，元素自身宽度设置为2rem，  通过控制台盒模型，可以看到，元素宽度为40px

搞清楚单位的区别之后，我们来简单的实现一下，让元素的宽度自适应
方案一：

已知一rem的大小等同于根元素的f