移动端布局总结

第一种方法：

/*

            用媒体查询去改变html中font-size的值

            然后项目中的rem根据html中的font-size的值发生变化

        */

        @media screen and (max-width:320px ) {

            html{font-size: 12px;}

            /*

                1rem = 12px;

            */

        }

        @media screen and (min-width:321px) and (max-width:375px ) {

            html{font-size: 14px;}

            /*

                1rem = 14px;

            */

        }

        @media screen and (min-width:376px ) {

            html{font-size: 16px;}

            /*

                1rem = 16px;

            */

        }

第二种方法vw;

vw = 从设计图上量出的大小 * 100 / 设计稿的宽度

第三种方法（vw结合rem）:

设计图640px

模拟器320px

dpr = 2

640px / 2 = 320px;(320px占视口的100%)

得到1份的px值

320px / 100 = 3.2px

1vw = 3.2px

    目的给html设置font-size：100px；（100px固定不变，不会进行拉伸）

？vw = 100px

100px / 3.2px = 31.25vw

开始操作：

首先设置html中的font-size:31.25vw;

开始计算：

例如从设计图上量出元素大小为400px;

根据dpr = 2；

所以400px / 2  = 200px;

?rem = 200px /100px(上面设置的31.25vw就是100px);

所以得到rem的值 = 2rem；

******项目整体布局 > 弹性盒子

******移动项目前提设置 ：