在智能手机上查看网页时强制元素移动

Question

我有一个包含 3 个并排 <span> 元素的网页 - 每个元素都是 400 像素宽。

这在我的笔记本电脑（以及其他浏览器和分辨率等）上看起来不错。

正如预期的那样，当我在智能手机上查看时，没有足够的空间容纳所有 3 个元素，并且 1 向下移动到下一行。但是，我想在智能手机上查看时将每个元素强制放到新行上。

所以在我希望用户看到的计算机上：

X X X

在智能手机上：

X
X
X

而不是我现在看到的：

XX
X

这可能吗？

Answer 1

没错！这称为responsive web design。您可以使用css media queries 告诉浏览器根据屏幕尺寸和方向使用不同的样式规则。