使用带有 css 媒体查询的两个视口答案

【问题标题】：Using two viewports with css media queries使用带有 css 媒体查询的两个视口
【发布时间】：2014-07-12 10:30:14
【问题描述】：

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

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

我设法让视口随着“width=device-width”动态变化，但布局将完全搞砸，比如三星 Note 3 屏幕为 380 像素。我想要任何大于 320 像素的屏幕来适应 1280 像素的视口。

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

谢谢。

【问题讨论】：

标签： html css media-queries viewport

【解决方案1】：

首先，不要使用设备宽度，它应该很少使用。很多人喜欢使用比他们的设备小的视口（比如我！）

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

/* 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-5ish，以便为所有屏幕尺寸提供服务

【讨论】：

这取决于你想要什么。我无法帮助你，因为这与我的答案无关。我的答案在没有元标记的情况下有效，但没有执行元标记所做的某些事情（媒体查询和元标记不同）
啊，我现在明白了。我想我会放弃视口。谢谢扎克！