Question

我在布局方面遇到媒体查询问题。例如，我有：

    @media screen and (min-width: 768px) and (max-width: 1024px) {

    .this-is-a-box {
      font-size: 20px;
      padding-left: 5%;
      padding-right: 5%;
    }

}

但是当布局的宽度小于920px时，我需要实现的值：

.this-is-a-box {
   font-size: 15px;
   padding-left: 1%;
   padding-right: 2%;
}

希望有人可以帮助解决这个问题。

谢谢！

Answer 1

Soooo为什么不使用两个媒体查询来指定边界？

/* Small screens */
@media screen and (max-width: 919px) {

    .this-is-a-box {
       font-size: 15px;
       padding-left: 1%;
       padding-right: 2%;
    }

}
/* Larger screens */
@media screen and (min-width: 920px) {

    .this-is-a-box {
      font-size: 20px;
      padding-left: 5%;
      padding-right: 5%;
    }

}

Answer 2

能够对GolezTrol的建议进行试验，而是这样做：

@media screen and (min-width: 768px) and (max-width: 919px) {

css here

}


@media screen and (min-width: 768px) and (max-width: 1024px) {

css here

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

      css here
   }

}

永远不知道这是可能的。但是这有什么缺点吗？

谢谢！

具有不同布局的相同媒体查询最小和最大宽度

2 个答案: