CSS媒体查询隐藏和显示页面元素。

Question

我对使用媒体查询进行编码有点新意，而且我认为自己已经把自己描绘成了一个角落，使用了太多的媒体查询（可能是以错误的方式）。

我想要做的是在屏幕或设备的宽度小于481px时隐藏一些页面元素。因此，在下面的屏幕截图中，您可能会在右上角看到几行文字。

我的问题与我使用的媒体查询有关。我最终弄清楚（1）为什么页面元素（右上角的那两行文本）在页面小于481px时不会消失或者（2）为什么它们不会出现在任何更大的屏幕中/设备大小，当我设法让页面元素消失。

以下是一段似乎导致一些问题的CSS代码：

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px){
   /* Hiding elements for this device * * * * * * * * * * * * * */
   /*
      .poweredBy{
         display: none;
      }
   */
 }

这段代码被注释掉后，这两行文字不会消失，直到窗口（设备？）宽度大约为320px。

以下是整个CSS：

/* Smartphones (portrait and landscape) ----------- */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
      .poweredBy{
          display: none;
      }
    }

/* Smartphones (landscape) ----------- */
    @media only screen and (min-width : 321px){
      .poweredBy{
          display: none;
      }
    }

/* Smartphones (portrait) ----------- */
    @media only screen and (max-width : 320px) {
        .poweredBy{
             display: none;
        }
    }



/* iPhone 4 ----------- */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {}

    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {}



/* iPads (portrait and landscape) ----------- */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}

/* iPads (landscape) ----------- */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}

/* iPads (portrait) ----------- */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}

/* iPad 3 ---------------- */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {}

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {}


/* Desktops and laptops ----------- */
    @media only screen and (min-width : 1224px) {}

/* 960px layouts ----------- */
    @media only screen and (min-width : 960px){}

/* Large screens ----------- */
    @media only screen and (min-width : 1824px) {}

我在底下使用了GroundworkCSS，但我自己添加了一些媒体查询 - 这很可能不是代表我的开明行为。所以如果有人能指出我正确的方向，我将非常感激。感谢。

Answer 1

您可以使用许多媒体查询，您应该拥有的最多只有三个用于平板电脑，平板电脑和手机。通常像这样，

CSS

/** Mobile **/
@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {



}

/** Tablet **/
@media only screen and (min-width : 768px) and (max-width : 1024px) {



}

/** Tablet (landscape) **/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {



}

Answer 2

纵向和横向的CSS代码：

@media screen and (orientation:portrait) {
/* Style for portrait mode goes here */
}

@media screen and (orientation:landscape) {
  /* Style for landscape mode goes here */
}

或者，正如Mitch Layzell所写，  你可以用这个：

@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
/** Mobile **/
}


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

}

/** Tablet (landscape) **/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/** Tablet **/
}

如果需要，可以同时插入“（方向：横向）”和“max-width”或“max-width-device”。