Question

我有这个元标记：

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

我有这个CSS：

@media (max-width: 1100px) and (max-device-width: 1100px) {
    .wrapper {
        width: 200px;
    }
    .page {
        width: 100%;
    }

我还尝试了以下css规则：

@media (max-width: 1100px) and (max-device-width: 1100px) {

和

@media only screen and (max-width : 767px) { .wrapper { width: 100%; } }

和

@media only screen and (min-width: 1024px) and (max-width: 1280px)

和

@media only screen and (min-width: 993px) and (max-width: 1024px)

这些CSS规则都不起作用。

在iPhone上完全忽略了它。

但它在调整为iphone大小的浏览器中运行良好。

自己看看：

我已将最大宽度扩展为荒谬的值，以尝试包含iPhone。

我不希望.wrapper为200px，我希望它是100％，并考虑到设备的宽度。

似乎iPhone认为它应该使这个页面的宽度大约为700像素。

如何让iPhone意识到我已经使这个网站响应，所以它调整到正确的大小？

Answer 1

以下是您可能会发现媒体查询有用的一些信息 -

我的第一个建议是，您可以设计CSS流程，从最小支持的分辨率向外工作，例如设计CSS文件以支持移动设备，然后使用媒体查询来处理将CSS文件中的属性更改为支持更大分辨率的窗口/设备。

使用此设计方法可以更轻松地处理特殊性问题，当您尝试使用媒体查询覆盖已定义的属性时，可能会出现这些问题。我从Media Query Styles Not Overriding Original Styles获得的避免此类冲突的一种方便方法 - 注意漂泊对身体的使用。

如果您不打算实际更改属性，则无需使用媒体查询覆盖属性 - 例如您不需要在媒体查询中指定包装器的宽度，因为它已经在CSS文件的主体中定义。

至于你有关宽度的问题，如果遇到100％的麻烦，请尝试将身体的宽度（或者，失败，包装）设置为100vw。

我希望以上内容不会太混乱。

如果您有任何疑问，请随时回复。