如何使用HTML和CSS创建响应式布局？

问：我正在设计一个网站，需要它在手机和平板上也能良好显示。我该如何使用HTML和CSS来创建响应式布局？

答：创建响应式布局，你需要使用灵活的布局容器和媒体查询。首先，使用<meta>标签设置视口来控制布局在不同设备上的缩放行为：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

然后，使用CSS的媒体查询来根据不同的屏幕尺寸应用不同的样式：

@media (max-width: 600px) {
    .container {
        padding: 10px;
    }
}

使用百分比宽度或使用弹性盒（flexbox）和网格（grid）布局系统来创建灵活的布局。

追问：我尝试使用百分比宽度，但有时候元素之间的间距在小屏幕上看起来太大了。我该怎么办？

回答：你可以使用媒体查询来调整小屏幕上元素的间距。例如，减少外边距或使用rem单位代替像素来获得更一致的间距。

思维导图↓

搜索