css3 响应式布局：div 内的方格元素响应式布局，无论浏览器怎么缩放，都保持比例不变，会浏览器窗口变小，元素会自动换行。不会出现元素挤压变形的情况，怎么做？

最新推荐文章于 2023-11-15 14:18:21 发布

wcdunf

最新推荐文章于 2023-11-15 14:18:21 发布

阅读量1k

点赞数

分类专栏： css scss 文章标签： css3 css 前端

本文链接：https://blog.csdn.net/wcdunf/article/details/130649872

版权

css 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

scss

2 篇文章 0 订阅

订阅专栏

文章介绍了如何利用CSS3的flex布局和@media查询来创建响应式的方格布局。通过设置display:flex和flex-wrap属性实现元素的自动换行，使用flex-basis或width指定元素宽度比例，结合@media查询根据屏幕宽度调整布局，确保在不同设备上都能有良好的显示效果。

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

实现 div 内的方格元素响应式布局，可以使用 CSS3 的 flex 布局和 @media 查询来实现。具体实现步骤如下：

使用 display: flex 设置 div 的布局方式为 flex 布局，使其内部的元素按照一定的比例排列。

cssCopy Code

.container { display: flex; flex-wrap: wrap; // 元素自动换行 }

对内部的元素进行比例设置，使用 flex-basis 属性或者 width 属性进行宽度设置，以百分比形式指定元素的占比。

cssCopy Code

.item { flex-basis: 33%; // 三列布局，每列占据 33.33% 的宽度 }

在样式中添加 @media 查询，根据不同的屏幕宽度设置不同的显示效果。例如，当屏幕宽度小于 600px 时，设置元素每行只显示两个，并且每个元素占据 50% 的宽度。

cssCopy Code

@media (max-width: 600px) { .item { flex-basis: 50%; // 两列布局，每列占据 50% 的宽度 } }

完整的代码示例如下：

htmlCopy Code

<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div>

cssCopy Code

<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div>

在以上代码中，当屏幕宽度小于 600px 时，元素每行只显示两个，并且每个元素占据 50% 的宽度，可以根据实际需求进行调整。使用 @media 查询可以根据不同的屏幕宽度设置不同的显示效果，使得页面在不同大小的屏幕上都能够合理地显示，并且具有良好的可读性和用户体验。