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

最新推荐文章于 2023-05-15 20:13:36 发布

weixin_34235105

最新推荐文章于 2023-05-15 20:13:36 发布

阅读量1.4k

点赞数

原文链接：http://www.cnblogs.com/f6056/p/10980341.html

版权

本文是一次编程练习，旨在利用媒体查询实现响应式布局。内容包括在不同显示器宽度下，图片布局从4列到3列、2列直至1列的变换。读者需设置图片宽度以调整每行显示的图片数量，适用于不同屏幕大小的设备。

摘要由CSDN通过智能技术生成

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;