响应式布局最最最简单的demo

最新推荐文章于 2020-10-18 18:52:07 发布

Micky丶

最新推荐文章于 2020-10-18 18:52:07 发布

阅读量295

点赞数 1

分类专栏： css3 文章标签： css3 响应式前端

本文链接：https://blog.csdn.net/weixin_38436883/article/details/100097022

版权

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先要在head标签内引入这两句


<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1, user-scalable=0" />

<meta content="telephone=no,email=no" name="format-detection" />

在css里面写上

        @media screen and (min-width:1200px) {
            .row {
                width: 30%;
            }
        }

这句话的意思就是 当屏幕宽度最小为1200px（即大于1200px）时，设置row这个类的样式

举个例子

先上图

各个分辨率的结果

源码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 媒体查询必须有的meta  -->
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <meta content="telephone=no,email=no" name="format-detection" />

    <title>响应式布局小demo</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
        }

        .wrap {
            width: 80%;
            margin: 0 auto;
        }

        .row {
            display: inline-block;
            height: 200px;
            border: 1px solid #000;
        }

        .row1 {
            background-color: #f40;
        }

        .row2 {
            background-color: rgb(218, 248, 82);
        }

        .row3 {
            background-color: rgb(60, 123, 206);
        }

        /* 当屏幕宽度最小为1200px，即大于等于1200px时*/
        @media screen and (min-width:1200px) {
            .row {
                width: 30%;
            }
        }

        /* 屏幕宽度的区间为 [992,1200]时 */
        @media (min-width:992px) and (max-width:1200px) {
            .row {
                width: 30%;
            }
        }

        /* 屏幕宽度最大为992px，即小于等于992px时 */
        @media screen and (max-width:992px) {
            .row {
                width: 40%;
            }
        }

        /* 屏幕宽度小于等于768px时  */
        @media (max-width:768px) {
            .row {
                width: 90%;
            }
        }

        /* 简便点的写法 */
        /* @media (min-width:1200px) {
            .row {
                width: 30%;
            }
        }

        @media (max-width:1200px) {
            .row {
                width: 30%;
            }
        }

        @media (max-width:992px) {
            .row {
                width: 40%;
            }
        }

        @media (max-width:768px) {
            .row {
                width: 90%;
            }
        } */
    </style>
</head>

<body>

    <div class="wrap">
        <div class="row1 row"></div>
        <div class="row3 row"></div>
        <div class="row2 row"></div>
    </div>

</body>

</html>