移动端布局，根据屏幕大小自动缩放

时间：2021-07-07 05:26:37

想要使内根据屏幕大小自适应缩放，就要了解一个单位 rem ：相对于根元素大小单位。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        @media  screen and (min-width:1200px ) {
             html{font-size: 48px;}
        }
        @media  screen and (min-width:800px ) and (max-width:1200px) {
             html{font-size: 24px;}
        }
        @media  screen and (max-width:800px ) {
             html{font-size: 12px;}
        }
        .nav{
            width: 10rem;
            height: 5rem;
            background: #009688;
            font-size: 1rem;
            color: #5FB878;
        }
        </style>
    </head>
    <body>
         <button class="nav">哈哈</button>
    </body>
</html>

 

标签：

相关文章