响应式布局与rem单位-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_21397815/article/details/78400820

1.字体大小用em，边框用em

其他的用rem

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,width = device-width,user-scalable=no">

    <style>

       *{

           margin: 0;

           padding: 0;

       }

        img{

            width: 3.75rem;

            height: 2.34rem;

        }

    </style>

</head>

<body>

<img src="imgs/home.png" alt="">

rfgrgr4

<script>

//    根据设备的尺寸来定制不同的长度值，比如width，height，marginTop等

//rem是根元素的字体大小，1rem = html的字体大小

var recalc = function(){

    var width = document.documentElement.clientWidth;

    var height = document.documentElement.clientHeight;

    document.documentElement.style.fontSize = 100*(width/375)+"px";

};

var resizeEvent = "orientationchange" in window?"orientationchange":"resize";

//当屏幕反转的时候执行

window.addEventListener(resizeEvent,recalc,false);

//刚进入的时候执行

document.addEventListener("DOMContentLoaded",recalc,false);

//    console.log(width+";"+height);

</script>

</body>

</html>