html - 仅使用 CSS 的自适应 html 布局

Question

我认为这是我关于自适应 HTML/CSS 布局的第二篇文章。我在上一篇实现自适应布局的帖子中得到了一个有用的答案，在我需要移除 float 并将容器一个放在另一个下面的地方更直接。

这次我得到了一些复杂的设计。让我展示设计在横向和纵向模式下的外观。

景观设计:

在纵向模式下，如果宽度小于 1024px，那么设计应该是这样的

人像设计: !

如果有人指导我如何处理此设计，将会很有帮助。如果需要更多信息，请随时询问

谢谢拉克斯

Answer 1

你可以尝试使用媒体查询

@media all and (max-width: 1023px) {
  /* CSS you need for portrait */
}

你可以阅读很多关于“响应式网页设计”的好文章。