Question

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

以下是主要规则。

var expandedProduct = product.brands.split(',').map(function(brand, index) {
  return {
    'name': product.name,
    'brand': brand.trim(),
    'cost': product.costs.split(',')[index].trim(),
    'vat_cost': product.vat_costs.split(',')[index].trim()
  }
});

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

 .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;
}

Answer 1

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

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

您是否想要使用320像素的max-width，以便绝对定位仅应用于320px或更低的视口？

Answer 4

我认为你的意思是

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

max not min

因此适用于小于320的尺寸,,,, 在你当前的演员阵容中，它适用于超过320的所有大小。

position：媒体查询中的绝对值覆盖所有其他规则

4 个答案: