2021-08-04

<link rel="shortcut icon" href="" type="image/x-icon"> 网页t图标
rem,em设置单位的区别
body部分

<section>
        <div>
            <p>hahahhahqha</p>
        </div>
    </section>

CSS部分

<style>
        html{
            font-size: 20px;
        }
        section{
            /* rem是根据html里面设置的字体大小算的，size*rem=px */
            width: 20rem;
            height: 15rem;
            background: royalblue;
        }
        div{
            /* rem是根据自己盒子里面设置的字体大小算的，size*rem=px */
            width: 10em;
            height: 10em;
            font-size: 25px;
            background: skyblue;
        }
        /* PPI: */
        /* DPR(设备像素比): 物理像素(设备显示)/逻辑像素(CSS设置)*/
    </style>

rem+vw(可视口宽度)
<!-- 
        640屏幕 iphone5 font-size:12px 100px=31.25vw rem=px/2/100
        750屏幕 iphone6/7/8 font-size:16px 100px=26.67vw
--
<style>
        html{
            font-size: 20px;
        }
        section{
            /* rem是根据html里面设置的字体大小算的，size*rem=px */
            width: 20rem;
            height: 15rem;
            background: royalblue;
        }
        div{
            /* rem是根据自己盒子里面设置的字体大小算的，size*rem=px */
            width: 10em;
            height: 10em;
            font-size: 25px;
            background: skyblue;
        }
        /* PPI: */
        /* DPR(设备像素比): 物理像素(设备显示)/逻辑像素(CSS设置)*/
    </style>