position:absolute 在媒体查询中覆盖所有其他规则

Question

我有一个基本的响应式设计，使用 bootstrap. 我只是尝试在一个视口中为元素提供绝对定位，并在所有其他视口中为其他元素提供绝对定位，但它会覆盖其他视图中的所有规则端口。

主要规则如下。

 .start-today  {
    color:#fffeaf;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.3px;
    margin-bottom:20px;
    float: right;
    text-align: center;
    margin-right: 20px;
    margin-top:40px;
    text-shadow: 1px 1px 1px #000;
    -webkit-text-shadow: 1px 1px 1px #000;
    -moz-text-shadow: 1px 1px 1px #000;
}
.start-today a {
       color:#fffeaf;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.3px;
    text-shadow: 1px 1px 1px #000;
    -webkit-text-shadow: 1px 1px 1px #000;
    -moz-text-shadow: 1px 1px 1px #000;
    transition: color 0.5s ease;
}

这是覆盖主规则和所有其他视口规则的最小视口中的规则。

  @media only screen and (min-width:320px) {

.start-today {
        color:#fffeaf;
        font-size: 14px;
        font-weight: bold;
        letter-spacing: 0.3px;
        text-align: center;
        position: absolute; bottom:100px; left:2px;
        }
        .start-today a {
            font-size:12px;
        }

}

Answer 1

使用 320 像素的 min-width，样式将应用于宽度为 320 像素或更大的视口。

您的意思是使用 320 像素的 max-width 以便绝对定位仅应用于 320 像素或更小的视口吗？

Answer 2

您正在使用 min-width: 320px，但我不知道还有比 320px 更小的屏幕，因此始终会触发查询。

尝试将 min 更改为 max 或调整 px

像这样：@media only screen and (max-width:320px)

或者这个：@media only screen and (min-width:720px)

所有其他查询都需要从 absolute 设置回 relative

像这样：position: relative;

Answer 3

那是因为媒体查询提高了规则的特殊性。另一种方法是在基本样式中添加 position: absolute 规则（在任何媒体查询之外），然后在您不再希望它应用时在媒体查询中将其删除。例如，如果您想停止将元素绝对定位在 500px：

// Set your initial rule:
.start-today {
    position: absolute;
    bottom: 100px;
    left: 2px;
}

@media only screen and (min-width: 500px) {
    .start-today {
        // reset your rules here:
        position: relative;
        bottom: auto;
        left: auto;
    }
}

Answer 4

我想你的意思是

 @media only screen and (max-width:320px)

最大值不是最小值

因此它适用于小于 320 的尺码, 在您当前的演员表中，它适用于所有尺寸超过 320

position:absolute 在媒体查询中覆盖所有其他规则

position:absolute in media query is overriding all other rules

html

css

media-queries

responsive-design