Question

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

我将设计调整如下：

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

}

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

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

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

当屏幕的宽度低于800px时，页面宽度自动设置为859px，并保持该宽度直到其低于400px，此时页面宽度自动设置为425px。

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

我在其他任何地方都找不到这个问题，我也不十分清楚为什么。在我看来，当页面调整时，它将取“ 400px”和“ 800px”点，并将所有宽度为100％的元素设置为这些值。额外的25px和59px可能是空白。

我还有一张图像设置为页面宽度的30％，这也分别采用了425px和859px的尺寸。

如果有人对可能导致这种情况的任何想法，我将非常感谢。

Answer 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来满足最适合您的需求的条件。

希望有帮助。

Answer 2

感谢您的答复。

原来是事物的结合。

首先，我为常规设计设置了“最大宽度：80％”，尽管我将媒体查询宽度设置为100％，但我还需要指定“最大宽度：100％”。

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

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

我猜身体的最大宽度和高度是这样的，以便当浏览器尺寸减小时，网站可以在笔记本电脑上正确显示。

如果要更改最小宽度和高度，请转到“检查”（在Chrome浏览器中，在其他浏览器中为类似选项，然后单击“元素”选项卡。找到“身体”元素，它将显示最小宽度和高度）。最小高度值（如果已启用）。要关闭它们，只需选择主体元素，在右侧的“元素”选项卡中选择十，将鼠标悬停在最小高度和最小宽度上，然后有一个勾号框可以打开开启和关闭。

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

再次感谢您的建议

丰富

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

2 个答案: