html - 使用 CSS 选择性显示内容，避免冲突

Question

我使用 CSS 根据视口(viewport)大小有选择地显示内容。例如:

CSS:

.hires, .midres, .lowres {
  display: none;
}

@media only screen and (min-width: 801px) {     /* hires, desktop */
  .hires {
    display: inline;
  }
}

@media only screen
            and (min-width: 600px)
            and (max-width: 800px) {            /* mid res, tablet */
  .midres {
    display: inline;
  }
}

@media only screen
            and (min-width: 320px)
            and (max-width: 599px) {            /* Low res / smartphone */
  .lowres {
    display: inline;
  }
}

HTML:

<p class="hires">Resolution: high.</p>
<p class="midres">Resolution: medium.</p>
<p class="lowres">Resolution: low.</p>
<p>This paragraph will always be displayed regardless of resolution.</p>

哪个有效，但仅在一定程度上有效。说到形象，原来我把自己巧妙地画到了这里的一个 Angular 落里。因为在线下的某个地方有类似的东西:

CSS:

@media only screen
            and (min-width: 320px)
            and (max-width: 599px) {           /* Low res / smartphone */
  img {
    float: none;
    display: block;
    width: 100%;
    height: auto;
  }
}

这意味着在以下情况下:

<img src="foo.jpg" class="hires" />

无论视口(viewport)大小如何，图像始终显示，因为“display: block;”覆盖(实际上冲突)前面的规则以选择性地显示或不显示图像。

不幸的是，“显示”与“无”没有对立面。我不能使用“可见性”，因为它仍然会在隐藏内容曾经所在的位置留下空白。我可以使用 jQuery 来显示 () 和隐藏 () 内容，但我不想将我的部分样式从样式表(它所属的位置)移动到 Javascript(严格来说，它不属于)。

不幸的是，我现在才注意到这个小问题，这对元素来说还很遥远。这意味着我是个白痴。 :-)

处理上述问题的最佳方法是什么？

Answer 1

你可以用 lores 类将图像包装在某些东西中，或者使用 img.lowres 作为你的 css 中的选择器，即

@media only screen
            and (min-width: 320px)
            and (max-width: 599px) {           /* Low res / smartphone */
  img.lowres {
    float: none;
    display: block;
    width: 100%;
    height: auto;
  }
}