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 **/
}

如果需要，可以一起插入“（方向：横向）”和“最大宽度”或“最大宽度设备”。