媒体查询中的位置：绝对覆盖所有其他规则答案

【问题标题】：position:absolute in media query is overriding all other rules媒体查询中的位置：绝对覆盖所有其他规则
【发布时间】：2016-03-30 11:06:34
【问题描述】：

我有一个使用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;
        }

}

【问题讨论】：

您需要在主代码中的.start-today 中添加position: relative; 或其他内容，以便它具有后备功能

标签： html css responsive-design media-queries

【解决方案1】：

我想你是说

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

最大不是最小

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

【讨论】：

【解决方案2】：

这是因为媒体查询提高了规则的特异性。另一种方法是在基本样式中添加您的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;
    }
}

【讨论】：

【解决方案3】：

您正在使用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;

【讨论】：

【解决方案4】：

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

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

【讨论】：