lovecoding
/
web0715


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./rem.js"></script>
    <style>
        html{
            font-size: 10px;
        }
        .div1{
            font-size: 15px;
        }
        /* .box { */
            /* font-size: 30px; */
            /* em 他是一个相对单位 em 相对于font-size进行调整 */
            /* 它先去自己内部找font-size如有那么就乘以当前font-size的值 */
            /* 如果自己没有font-size那么就往上找 */
            /* width: 20em;
            height: 20em;
            border: 1px solid black; */
        /* } */

        .box{
            /* rem 也是相对单位 它是相对于html的font-size */
            width: 2rem;
            height: 2rem;
            border:1px solid black;
        }
        
    </style>
</head>

<body>
    <div class="div1">
        <div class="box">
            hello world
        </div>
    </div>
    <script>
        // window.onpageshow = function(){
        //     var htmlWidth = document.documentElement.getBoundingClientRect();
        //     setTimeout(function(){
        //         document.documentElement.style.fontSize = htmlWidth/7.5+"px";
        //         console.log(document.documentElement.style.fontSize)
        //     },1000)
        // }
        // window.onresize = function(){
        //     var htmlWidth = document.documentElement.getBoundingClientRect();
        //     document.documentElement.style.fontSize = htmlWidth/7.5+"px";
        // }

    </script>
</body>

</html>