CSS媒体查询以隐藏和显示页面元素. [英] CSS media queries to hide and show page elements .

问题描述

我是媒体查询编码的新手，我认为我使用过多的媒体查询(可能以错误的方式)陷入了困境.

I'm kind of new to coding with media queries, and I think I have painted myself into a corner, using too many media queries (and probably in the wrong way).

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

What I want to do is to hide some page elements when the width of the screen or device is smaller than 481px. So in the screenshot below, you might be able to see the couple of lines of text in the upper right corner.

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

My problem has to do with the media queries that I've used. I am at wit's end to figure out (1) why the page elements (those two lines of text in the upper right corner) are not disappearing when the page gets smaller than 481px OR (2) why they do not appear in any larger screen/device sizes when I do manage to get the page elements to disappear.

这是一段似乎引起一些问题的CSS代码:

Here is the piece of CSS code that seems to cause some issues:

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

注释掉这段代码后，这两行文本将不会消失，直到窗口(设备?)的宽度大约为320像素为止.

With this code commented out, those two lines of text won't disappear until the window (device?) width is somewhere around 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，但是我自己添加了一些媒体查询-这很可能不是代表我的开明行为.因此，如果有人能指出我正确的方向，我将不胜感激.谢谢.

I am using GroundworkCSS underneath, but I have added a few media queries myself -- that was most likely not an enlightened act on my behalf. So if anyone could point me in the right direction, I would be most grateful. Thanks.

推荐答案

您可以通过多种方式查询媒体，平板电脑，平板电脑风景和移动设备最多应有三个.通常是这样

You have way to many media queries, the most you should have is three one for tablet, tablet landscape and mobile. Typically like this,

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



}

这篇关于CSS媒体查询以隐藏和显示页面元素.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！