时间戳

首页 > 解决方案 > 使用媒体查询时的页面宽度问题

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

问题描述

使用@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。

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

标签： cssmedia-queries

解决方案

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

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

希望有帮助。

推荐阅读