适配-rem

  rem单位大小是根据 html根标签的 font-size 来决定的 

        （根标签的font-size是根据屏幕大小来定的）

     html {

            vw :

            将屏幕分成100份 , 1vw 单位 等同于  屏幕宽度的1/100 

            公式换算 

           100vw = 390px ,1vw=3.9px

            x = 100px 

            html标签的字体大小 , 100px 

            font-size: 25.64vw;

            font-size: 20px; 

        }

       p {

            font-size: 0.16rem;

        } 

 

        媒体查询

        /*  屏幕区间可写作 手机屏幕大小 */

        @media screen and (min-width:801px) {(最小宽度801px)

            p {

                background-color: 颜色;（当页面宽度大于801px显示颜色）

                font-size: 25px;

            }

        }

        @media screen and (max-width:800px) {（最大宽度800px）

            p {

                background-color: 颜色;（当页面宽度小于800px显示颜色）

                font-size: 16px;

            }

        }

        @media screen and (max-width:320px) {（最大宽度320px）

            p {

                background-color: 颜色;（当页面宽度小于320px显示颜色）

                font-size: 12px;

            }

        }

     rem      px      em 

    1em值 等于 父元素 font-size的值 

     p {

            font-size: 1em;

            width: 10em;

            height: 10em;

            background-color: 颜色;

        } 

      rem的值 不是根据父元素来定，根据html 的font-size 值来定。 

       .类名 {

            font-size: 0.16rem;

            width: 1rem;

            height: 1rem;

            background-color: 颜色;

        }