html - 将两个视口(viewport)与 css 媒体查询一起使用

Question

我想让我的网站在 iPhone 屏幕上响应，但我在 css 媒体查询方面仍然是菜鸟。

现在我有两种不同的 css，一种用于 320 像素屏幕的移动设备，另一种用于桌面版本 (1280 像素)。我想要做的是让视口(viewport)在检测到 320 像素的屏幕时自动调整为 320 像素，但任何更大的尺寸(> 320 像素)将自动使用视口(viewport):1280 像素。

我设法通过“width=device-width”使视口(viewport)动态变化，但布局将完全搞砸，比如 Samsung Note 3 和 380px 屏幕。我想要任何大于 320 像素的屏幕来适应 1280 像素的视口(viewport)。

这似乎是最简单的事情，但我无法按照我想要的方式让它工作。希望有人能就此启发我，并希望我糟糕的英语不会那么令人困惑。

谢谢。

Answer 1

首先，不要使用设备宽度，它应该很少被使用。很多人喜欢使用比他们的设备小的视口(viewport)(比如我!)

话虽如此，您需要使用 min-width或 max-width为你的@media查询。我建议执行以下操作，称为移动优先开发

/* All styles for mobile (<320px) */
... All of your properties ...

@media (min-width: 320px) { /* Apply on all screen larger than 319px */
    /* Override older properties for the 1280px viewport */
    .. Your properties that override the smaller sized page properties ...
}

使用这种方法，您可以同时使用其中的几个，以服务于所有屏幕尺寸。

但是，如果您不想首先为移动设备提供服务，您也可以采用相反的方式进行

/* All styles for large screen (1280px layout) */
... All of your properties ...

@media (max-width: 320px) { /* Apply on all screen smaller than 321px */
    /* Override older properties for the 320px viewport */
    .. Your properties that override the larger sized page properties ...
}

同样，我建议使用其中的几个，根据您的页面可能使用 3-5 种，以适应所有屏幕尺寸