Question

我想让我的网站在iPhone屏幕上响应，我仍然在css媒体查询noob。

现在我有两个不同的css one用于手机320px屏幕和一个用于桌面版本（1280px）。我想要做的是使视口在检测320px屏幕时自动调整为320px，但任何更大的尺寸（> 320px）将自动使用视口：1280px。

我设法通过“width = device-width”动态改变视口但是布局完全不用说三星Note 3和380px屏幕。我想要任何大于320px的屏幕来调整1280px视口。

这似乎是最简单的事情，但我不能按照我想要的方式工作。希望有人可以在这方面让我高兴，并希望我的英语不是那么令人困惑。

感谢。

Answer 1

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

话虽如此，您需要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种，具体取决于您的页面，以便提供所有屏幕尺寸

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

1 个答案: