HTML-CSS-适配

方案一：使用meta标签

在html的head中插入下面的meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="viewport" content="width=375, user-scalable=no">

插入两个viewport标签，width=device-width 写在上面，width=375 写在下面，375就是以哪个设备宽度为基准，现在大部分设计稿都是以iphone6的375宽度为基准做2倍图。加了上面两个mata标签，后面的css就可以完全使用px为单位直接使用，整个页面会自动按设备宽度进行等比例缩放。

方案二：使用css的calc计算属性

在css中定义html的 font-size 为：calc(100vw/3.75)，calc、vw能兼容ios8+和android4.4+，可以放心使用，如下：

html {

        font-size: calc(100vw/3.75);

        -webkit-text-size-adjust: 100%;

         }

然后在css中，就可以将所有的px单位除以100，得到rem单位了。比如：

.row>div {

         float: left;

        width: .82rem;

        height: .82rem;

        text-align: center;

        line-height: .82rem;

        margin-left: .05rem;

        background-color: #f0f0f0;

        }

总结：两种方法如何选择

方案一：直接使用html的mata实现整个页面的缩放，比较适合那些宣传单页或全屏游戏交互类，无法实现px与rem共存的情况。

方案二(推荐)：利用了rem来缩放，可实现与px共存，在借助px2rem的情况下，能高效方便的实现适配。