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

最新推荐文章于 2021-05-30 20:34:53 发布

weixin_30686845

最新推荐文章于 2021-05-30 20:34:53 发布

阅读量619

点赞数

原文链接：http://www.cnblogs.com/wangyanei2017/p/9374429.html

版权

想要使内根据屏幕大小自适应缩放，就要了解一个单位 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>