12

@media クエリを使用する Web サイトがありますが、設定されていないようです。それらは常にデフォルトのスタイルを維持します。

例えば：

#div1 { background:red}

@media screen and (max-height:912px) {
#div1{background:blue}
}

使用しない限り常にbackground:redに固執します!importantが、メディアクエリ内で非常に多くのセレクターをスタイリングしています。すべての単一のセレクタ スタイルに設定する必要があり!importantますか?

4

6 に答える 6

3

max-height を min-height に変更: http://jsfiddle.net/jnQYb/

于 2012-04-21T21:52:38.103 に答える
2

それは私にとってはうまくいきます。

http://jsfiddle.net/TUL6h/1/-背景は赤ですが、結果のパーツの高さを変更すると、ある時点で青に変わります。

どのブラウザを試していますか？

于 2012-04-21T19:32:27.177 に答える
0

@media クエリに含まれるコード内で !important を使用することは、ページ要素に動的なスタイル プロパティを追加する効果的な方法ですが、メンテナンスを容易にするために「デフォルト」の CSS はそのまま残します。

例：

<html>
    <head>
    <style>
    @media all and (max-width: 768px) {

    /* CSS styles targeting screens of smaller sizes and/or resolutions (IE phones and tablets)  */

        #semantically-named-element p 
        { width: 60% !important;
        background: rgba(0,0,255,1)!important;
        margin: auto !important; }

        #semantically-named-element span 
        { display: none !important; }

    } 
    /* Look ma no media queries needed for default CSS below! Very easy to discern default styles, when the default code is the stuff not wrapped in queries. Period. */    

    /* Default CSS style attributes for any viewports that do not fit into the low or high resolution/screen size parameters set above and below. Also the fallback for browsers that still disregard CSS media queries */  
    #semantically-named-element p 
        { width: 90%;
          background: rgba(255,0,0,1);
          margin: auto; }

    #semantically-named-element span 
        { display: block;
          background: rgba(0,0,0,0.8);
          color: #FFF;
          text-align: center;}  
    @media all and (min-width: 968px) {
    /* CSS styles targeting very large or very high resolution viewports at the 769 pixels wide "break-point" */
        #semantically-named-element p 
        { width: 80% !important;
        background: rgba(0,255,0,1)!important;
        margin: auto !important; }

        #semantically-named-element span 
        { display: block !important;
        background: rgba(0,0,0,0.8)!important;
        color: #FFF !important; font-size: 200%; }
    }
    </style>
  </head>

  <body>
      <div id="semantically-named-element">  
        <p> Usage of !important inside of the code contained within your @media queries is an effective way to add dynamic style properties to your pages elements, while leaving your 'default' css intact for easy maintenance.<span>hidden until tablet greater 768 viewport pixel width</span></p>
      </div>  
   </body>
</html>
于 2013-09-23T00:10:44.313 に答える
0

必須ではありませんが、!importantはデフォルトの CSS をオーバーライドするために使用されます。つまり、デフォルトのスタイルで使用される属性をオーバーライドします。そのため、メディア クエリに新しい属性がある場合、それを一緒に使用する必要はありません。

于 2012-08-22T13:30:34.987 に答える