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

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

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

cssCopy Code

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

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

cssCopy Code

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

1. 在样式中添加 @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 查询可以根据不同的屏幕宽度设置不同的显示效果，使得页面在不同大小的屏幕上都能够合理地显示，并且具有良好的可读性和用户体验。