是否有适合各种尺寸手机的视口屏幕模式配置？

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规则（如果需要）以在需要时重排内容。您可以通过缩小和扩大浏览器窗口来轻松测试这些断点。然后你会知道，无论屏幕大小如何，你都覆盖了所有基础，内容将适当地流入该设备。