9

我对使用媒体查询进行编码有点陌生，我想我已经把自己画到了一个角落，使用了太多的媒体查询（并且可能以错误的方式）。

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

网站页眉区域截图

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

这是一段似乎会导致一些问题的 CSS 代码：

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

注释掉这段代码后，这两行文本不会消失，直到窗口（设备？）宽度达到 320 像素左右。

在此处输入图像描述

这是整个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，但我自己添加了一些媒体查询——这很可能不是代表我的开明行为。因此，如果有人能指出我正确的方向，我将不胜感激。谢谢。

4

2 回答 2

16

您有许多媒体查询方式，您应该拥有的最多的是平板电脑、平板电脑景观和移动设备的三个之一。一般是这样的，

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) {



}
于 2013-10-15T20:56:29.870 回答
5

纵向和横向的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 **/
}

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

于 2015-05-22T16:00:45.033 回答