移动端的写法

 

 

        pc 端 标准设计图 1920*xxxx会有版心

 

        移动端

            1  设计图 比实际的手机大2背或者三倍

 

        pc 端 标准设计图 1920*xxxx会有版心

 

        移动端

            1  设计图 比实际的手机大2背或者三倍

             2 手机的屏幕 视网膜屏幕

 

             3 iphone6 为例 物理像素750 逻辑像素375

             设备像素比 （）dor 物理橡树 /逻辑像素

 

 

             一般情况下 现在主流移动端大合集设计图 750*xxx

 

 

 

 

             移动端的实现  

    html {

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

 

    }

 

    p {

        font-size: 32rem;

        width: 100rem;

        height: 100rem;

        background-color: aquamarine;

    }

        /* 屏幕宽度正好是750的时候 字体大小是1px */

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

        /* 屏幕宽度正好是750的时候 字体大小是100px */

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

 

    }