@media css 响应式设计答案

【问题标题】：@media css responsive design@media css 响应式设计
【发布时间】：2018-12-22 10:19:13
【问题描述】：

我为 css 文件中的不同断点编写了以下媒体查询。

@media all and (max-width: 350px) {}
@media all and (min-width: 350px) and (max-width: 440px) {}
@media all and (min-width: 440px) and (max-width: 768px)  {}
@media all and (min-width: 768px) {}

宽度为 440px 或 768px 时媒体查询会不会有冲突？因为当我在浏览器上测试它时，似乎媒体查询中指定的一些css字体在浏览器中没有被拾取。

正在考虑用以下方式编写它，以下方式可以吗？或者还有其他方式可以更好地编写媒体查询吗？

@media all and (max-width: 350px) {}
@media all and (max-width: 440px) {}
@media all and (max-width: 768px)  {}
@media all and (min-width: 768px) {}

【问题讨论】：

标签： css media-queries responsive

【解决方案1】：

我更喜欢另一种方式来编写@media 查询这可能不是好方法，但它很方便

@media (max-width: 780px){
    // your code here..
}

@media (max-width: 320px){
    // your code here..
}

请确保您按最大宽度的降序排列，即最大宽度应先出现，然后最大宽度较低

对于相同的最大宽度，不能有两个@media 查询，如果是这样，则将其设为一个

希望这对你有用

【讨论】：