第二十四节 屏幕适配之响应式布局 

<!-- 响应式布局：
        响应式布局就是使用媒体查询的方式，通过查询浏览器的宽度，不同的宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕（pc、平板、手机） -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        body{
            margin: 0
        }

        .con div{
            width: 23%;
            height: 200px;
            background-color: gold;
            margin: 1%;
            border: 2px solid #000;
            float: left;
            box-sizing: border-box;
        }

        @media (max-width: 800px){
            .con div{
                width: 46%;
                margin: 2%;
            }
        }

        @media (max-width: 400px){
            .con div{
                width: 94%;
                margin: 3%;
            }
        }
    </style>
</head>
<body>
    <div class="con">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

 

posted @ 2020-03-14 16:31  kog_maw  阅读(174)  评论(0)    收藏  举报