使用媒体查询时的页面宽度问题答案

【问题标题】：Page width issue when using media queries使用媒体查询时的页面宽度问题
【发布时间】：2019-05-08 16:27:10
【问题描述】：

在使用 @media 时，我的响应式设计中的页面宽度存在问题。

我已将我的设计设置为如下调整：

@media only screen and (max-width : 400px), screen and (min-width: 400px) and (max-width: 800px) and (orientation: portrait){

}

在我对宽度设置进行了一些更新之前，这一切正常。以前，我在一个元素上设置了 400 像素的最小宽度，因为我不希望页面缩小到 400 像素以下。然后它会根据我的需要在 400-800 像素之间调整和扩展。

但是，我已对其进行了更改，以便将元素设置为 100% 宽度（低于 400 像素以及 400-800 像素），以便屏幕自动适应任何移动设备。

但是，由于某种原因，我现在遇到了以下问题。

当屏幕宽度低于 800 像素时，页面宽度自动设置为 859 像素，并一直保持到低于 400 像素，此时页面宽度自动设置为 425 像素。

在这两种情况下，它都是固定的，并且不会调整到屏幕宽度。

我找不到其他有此问题的地方，我真的不明白为什么。在我看来，当页面调整时，它会采用 '400px' 和 '800px' 点并将所有具有 100% 宽度的元素设置为这些值。额外的 25px 和 59px 可能是边距什么的。

我还有一张图片设置为页面宽度的 30%，它的大小也分别为 425px 和 859px。

如果有人对可能导致此问题的原因有任何想法，我将不胜感激。

【问题讨论】：

标签： css media-queries

【解决方案1】：

这是媒体查询的正确格式，我为您可能使用的不同平台提供了一些通用尺寸。

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

如果您想更深入一点，请记住 and 要求所有条件都为真，才能使用其中的 css。我建议您改为查看or 语句，或者同时使用and 和or 来满足最适合您需求的条件。

希望对您有所帮助。

【讨论】：

我还会检查您的边距和包装器，以确保没有过度扩展，确保 @media 查询不太复杂或事情变得不稳定，并记住 css 顺序确实很重要.样式表是从上到下读取的，最后适用于样式的东西将被执行并粘贴。例如.sample{width 100%; height: 100%;} .sample{width:10%;} 示例类的宽度将是 10% 而不是 100%，因为最后一个值将应用于宽度样式属性。
我只想指出我的手机具有“超大设备”分辨率。我的 15 英寸笔记本电脑有一个 4k 屏幕。小于 1000 像素的任何东西都很小，而 400 像素仅比邮票大一点。有没有比服务器端像素限制更灵活的屏幕布局方式？

【解决方案2】：

感谢您的回复。

原来是事物的组合。

首先，我为正常设计设置了“最大宽度：80%”，虽然我将媒体查询宽度设置为 100%，但我还需要指定“最大宽度：100%”。

另一个问题是，在浏览器中，您的身体有一个默认的最小宽度和最小高度设置。这些已打开并设置为 420 像素。

完成这两项更改后，问题就解决了。

我猜测正文的最大宽度和高度是为了在缩小浏览器尺寸时网站可以在笔记本电脑上正常显示。

如果您想更改最小宽度和高度，请转到“检查”（在 chrome 中，其他浏览器中的类似选项，然后是元素选项卡。找到您的“正文”元素，它将显示最小宽度和min-height 值（如果它们已打开）。要关闭它们，只需选择 body 元素，在右侧的“元素”选项卡中选择十个，将鼠标悬停在 min-height 和 min-width 上，然后有一个复选框可以打开开和关。

在其他浏览器中检查过，方法类似。

再次感谢您的建议

丰富

【讨论】：