浏览器窗口标题的小图标以及rem,em,vw等单位

浏览器窗口标题的小图标

<title>薛之谦老婆——小爱菊</title>
<!-- 标题前的图标显示 -->
<link rel="shortcut icon" href="../图片/4.jpg" type="image/x-icon">

效果：

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
-->