html - 是否有适合所有尺寸手机的视口屏幕模式配置？

Question

我使用了视口屏幕模式的组合，但在跨手机和平台进行测试时，它们往往不起作用。

我一直使用的代码示例有一个 480px 宽的 html 文档，定义如下：

<link rel="stylesheet" media="only screen and (min-width: 320px) and (max-width: 480px) href="mobile.css" />

一直是：

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

任何帮助表示赞赏。

Answer 1

有太多不同的屏幕尺寸，尝试为所有尺寸设置样式是一场失败的战斗。更好的方法（可以说）是专注于您自己的内容的自然断点，并设置@media 规则（如有必要）以在需要的地方重排内容。您可以通过缩小和扩大浏览器窗口轻松测试这些断点。然后您就会知道，无论屏幕大小如何，您都已涵盖所有基础，并且内容将针对该设备适当地流动。