2-5编程练习：响应式布局案例——不同屏幕大小显示不同图片布局

2-5编程练习

我们刚学习了通过媒体查询进行响应式布局，接下来我们来实现图片在显示器大小变化时，布局由4列变3列变2列变1列的响应式效果吧。

要求：

(1)显示器宽度大于960px时，图片呈一行4列布局;

(2)宽度小于960px大于780px时，呈一行3列布局;

(3)宽度小于780px大于440px时，呈1行2列布局;

(4)宽度小于440px时，呈1行1列布局。

(建议到本地进行测试哦)

任务

1、先定义图片整体样式

2、使用媒体查询定义在不同大小显示的时候，一行要显示几张图片。通过设置图片的宽度，达到一行几列的效果。

参考代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>临时测试代码</title>
    <style>
        #box {
            width: 80%;
            margin: 0 auto;
            background: #ccc;
            text-align: center;
        }

        #box>img {
            display: inline-block;
            padding: 1.5%;
            width: 21%;
            height: 200px;
        }

        /* 此处写代码 */

        @media screen and (max-width:960px) and (min-width:780px) {
            #box {
                width: 100%;
                margin: 0 auto;
                background: #ccc;
                text-align: center;
                font-size: 0;
            }

            #box>img {
                display: inline-block;
                box-sizing: border-box;
                padding: 1.5%;
                width: 33.33%;
                height: 200px;
            }
        }

        @media screen and (max-width:780px) and (min-width:440px) {
            #box {
                width: 100%;
                margin: 0 auto;
                background: #ccc;
                text-align: center;
                font-size: 0;
            }

            #box>img {
                display: inline-block;
                box-sizing: border-box;
                padding: 1.5%;
                width: 50%;
                height: 200px;
            }
        }

        @media screen and (max-width:440px) {
            #box {
                width: 100%;
                margin: 0 auto;
                background: #ccc;
                text-align: center;
                font-size: 0;
            }

            #box>img {
                display: inline-block;
                box-sizing: border-box;
                padding: 1.5%;
                width: 100%;
                height: 200px;
            }
        }
    </style>

</head>

<body>
    <div id="box">
        <img src="http://img.mukewang.com/climg/5a45e49100014e5010601059.jpg" alt="">
        <img src="http://img.mukewang.com/climg/5a45e49100012e6d09940789.jpg" alt="">
        <img src="http://img.mukewang.com/climg/5a45e4910001d04e09940732.jpg" alt="">
        <img src="http://img.mukewang.com/climg/5a45e49100014e5010601059.jpg" alt="">
        <img src="http://img.mukewang.com/climg/5a45e49100012e6d09940789.jpg" alt="">
        <img src="http://img.mukewang.com/climg/5a45e4910001d04e09940732.jpg" alt="">
    </div>
</body>

</html>

 

posted @ 2019-06-05 16:28  请叫我二狗哥  阅读(977)  评论(0)    收藏  举报