如何在不添加/删除/编辑设计和 CSS 的情况下为纵向和横向模式进行响应式设计？

Question

我正在为台式机和 iPad 设计网站。同一网站将用于 iPad 和台式电脑。

网站的设计宽度为 1024 像素，在 iPad 纵向模式下为 768 像素。我的问题是在进行设计和编写 CSS 时应该考虑哪些事项，因此不需要为肖像模式编写特定的 css

我想在不使用媒体查询的情况下为两个方向制作灵活的布局。

Answer 1

您将不得不对所有内容使用相对宽度 - 考虑百分比和 em。

如果没有媒体查询，就不可能为方向提供不同的布局 - 但是，如果您的设计和代码是灵活的（使用相对宽度），您的设计将根据可用的屏幕宽度进行扩展和收缩。

在我看来，最大的设计问题是 768 像素宽与 1024 像素宽的网站外观；线的长度是否太长？图像将如何拉伸/收缩？ 768px 的字体大小在 1024 时是否清晰可见？

Answer 2

字体大小将根据您设置的 em 自动调整，这是一件好事，因此您不必担心。