相关疑难解决方法(0)

@media screen and (max-width: calc(2000px-1px)) { 
  .col { width: 200px; }
}

减法后的值应该是1999px,但它似乎不起作用.如果我手动将其更改为1999px它工作正常,所以我知道这不是我的CSS的问题.是calc不是媒体查询中支持的,还是我做错了什么？

我正在重新设计我的博客,其中考虑了响应式网页设计,以及"移动优先"方法 - 简而言之,我正在尝试使用min-width来避免任何类型的复制或css ..没有显示:无等等.

我的问题是,当我确实需要覆盖CSS值时,较低的最小宽度优先.例:

@media only screen and (min-width: 600px) {
    h2 { font-size: 2.2em; }
}

@media only screen and (min-width: 320px) {
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
}

我期待当我在600px及以上的分辨率下得到2.2em h2,但我得到1.7em ..在我的开发工具中,我看到2.2em声明在那里,但另一个优先.这没有意义!

我可以继续使用最小宽度并有效地覆盖较高分辨率的声明而不使用更强的选择器或最大宽度..？

级联是使CSS特别强大的原因.但在媒体查询的情况下,重叠可似乎有问题.

考虑以下CSS(CSS媒体查询重叠的连续规则):

/* Standard - for all screens below 20em */

body { color: black; font-size: 1em; }

/* Query A - slightly wider, mobile viewport */

@media (min-width: 20em) and (max-width: 45em) {
    body { color: red; } /* supposed to be unique for this width */
}

/* Query B - everything else */

@media (min-width: 45em) {
    body { font-size: larger; } /* because viewport is bigger */
}

因此,当屏幕正好是45em宽时,45em处的重叠将 …

因此,举例来说,如果我有一个媒体查询,还有一些关于东西的重要规则的常规CSS,它会受到影响吗？

例如:

a{
    color:#0000FF!important;
}
@media (max-width: 300px){
    a{
        color:#FF0000;
    }
}

我试图理解为什么min-width: 600下面的媒体查询会覆盖min-width: 768媒体查询.

我知道600px后来出现在CSS文件中,这可能是一个原因,但肯定只有一个应该只在屏幕尺寸是600或768时应用？

我现在正在研究媒体查询文档,但还是能够解释这一点.

谢谢你的帮助.

我正在使用媒体查询和弹性框来使我的网站做出响应，我认为我在这里有点愚蠢，但说我有包装器的 css 类，如下所示：

 .wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    height: 80px;
    top: 0;
    z-index: 1;
    border-bottom: solid 1px #eee;
 }

(max-width: 450px) 的媒体查询继承什么值？或者它不继承任何东西？

@media only screen and (max-width: 450px) {
  .wrapper {
    height: 50px;
  }
}

谢谢

来自CSS工作组的帖子:

自定义属性不仅仅用于变量[...]

与许多人的想法相矛盾(见本文),这篇文章不仅证实了变量和自定义属性不是同一个东西,而且自定义属性可以用于除变量之外的其他东西.

我的问题是关于最后一部分.有没有人遇到过一些CSS代码,其中自定义属性用于变量之外的其他东西？

我正在做一个项目,我遇到了一个问题.我将向您展示以下演示示例:

这是css代码:

    *, *::after, *::before {
    box-sizing: border-box;
    margin: 0;
    border: 0;
}

@media only screen and (max-width: 600px) {
    div {
        background: blue;
    }
}


@media only screen and (min-width: 601px) and (max-width: 1000px)  {
    div {
        background: green;
    }
}


@media only screen and (min-width: 1001px) {
    div {
        background: red;
    }
}

所以我的div应该是:

• 蓝色从0px到600px
• 绿色从601px到1000px
• 红色从1001px到...

相反,它是:

• 蓝色从0px到600px
• 白色在601px
• 绿色从602px到1000px
• 白色在1001px
• 红色从1002px到...

为什么？似乎(min-width:)不具有包容性.

所以我尝试过:

    *, *::after, *::before {
    box-sizing: border-box;
    margin: 0;
    border: 0;
} …

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

代码示例源: …