rem(js驱动和媒体查询驱动）、网格布局

逝者如斯夫。

已于 2022-05-26 20:33:10 修改

阅读量71

点赞数

分类专栏： HTML +CSS 文章标签： css html

于 2021-08-12 14:10:49 首次发布

本文链接：https://blog.csdn.net/weixin_60323200/article/details/119639205

版权

HTML +CSS 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

网络布局的媒体查询

@media

JS驱动rem（实时变化）

主要代码

 // 实现一个事儿：让html标签的字号，是屏幕此时宽度的1/10。
        // 想清楚：屏幕的总宽度是10rem。除几，屏幕总宽度就是几rem。
        // 当屏幕尺寸改变的时候
        window.onresize = function() {
            document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
        };

        // 页面打开那一瞬间，也设一下
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box1 {
            width: 2.5rem;  
            height: 1rem;
            background-color: orange;
            float: left;
        }
        .box2 {
            width: 2.5rem;   
            height: 1rem;
            background-color: rgb(190, 10, 160);
            float: left;
        }
        .box3 {
            width: 2.5rem;   
            height: 1rem;
            background-color: rgb(35, 150, 7);
            float: left;
        }
        .box4 {
            width: 2.5rem;   
            height: 1rem;
            background-color: rgb(233, 77, 5);
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>

    <script>
        // 实现一个事儿：让html标签的字号，是屏幕此时宽度的1/10。
        // 想清楚：屏幕的总宽度是10rem。除几，屏幕总宽度就是几rem。
        // 当屏幕尺寸改变的时候
        window.onresize = function() {
            document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
        };

        // 页面打开那一瞬间，也设一下
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
    </script>
</body>
</html>

媒体查询驱动rem（边界会有咯噔感）

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @media screen and (min-width:320px) {
            html {
                font-size: 21.33px
            }
        }

        @media screen and (min-width:360px) {
            html {
                font-size: 24px
            }
        }

        @media screen and (min-width:375px) {
            html {
                font-size: 25px
            }
        }

        @media screen and (min-width:384px) {
            html {
                font-size: 25.6px
            }
        }

        @media screen and (min-width:400px) {
            html {
                font-size: 26.67px
            }
        }

        @media screen and (min-width:414px) {
            html {
                font-size: 27.6px
            }
        }

        @media screen and (min-width:424px) {
            html {
                font-size: 28.27px
            }
        }

        @media screen and (min-width:480px) {
            html {
                font-size: 32px
            }
        }

        @media screen and (min-width:540px) {
            html {
                font-size: 36px
            }
        }

        @media screen and (min-width:720px) {
            html {
                font-size: 48px
            }
        }

        @media screen and (min-width:750px) {
            html {
                font-size: 50px
            }
        }

        * {
            margin: 0;
            padding: 0;
        }

        .c1 {
            float: left;
            width: 3rem;
            height: 3rem;
            background-color: orange;
        }

        .c2 {
            float: left;
            width: 3rem;
            height: 3rem;
            background-color: red;
        }

        .c3 {
            float: left;
            width: 3rem;
            height: 3rem;
            background-color: blue;
        }

        .c4 {
            float: left;
            width: 3rem;
            height: 3rem;
            background-color: green;
        }

        .c5 {
            float: left;
            width: 3rem;
            height: 3rem;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
    <div class="c5"></div>
</body>

</html>