07. 如何实现移动端rem适配

时间：2023-03-08 20:41:49
如何实现移动端rem适配
<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />//需要这句适配的话

    <title></title>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

        }

        #box{

            width: 7.5rem;

            height: 7.5rem;

            background: red;

        }

    </style>

</head>

<body>

<div id="box"></div>

</body>

<script type="text/javascript">

    //获取屏幕宽度

    var width = document.documentElement.clientWidth;

    //获取html

    var htmlNode = document.querySelector('html');

    //设置html字体大小

    htmlNode.style.fontSize = width/7.5 + 'px';

</script>

</html>

　　

10.背景图片距离
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        #box{

            width: 100px;

            height: 200px;

            background: pink;

            padding: 100px;

            border: 80px solid blue;

            background-image: url("img/1.png");

            background-repeat: no-repeat;

            background-origin: content-box;

            background-position: -50px 0;

        }

        /*答案：130px*/

    </style>

</head>

<body>

<div id="box"></div>

</body>

</html>

　　

相关文章