1

css の問題をトラブルシューティングしようとしています (bootstrap.css を使用)。独自のカスタム css ファイルを作成して、ブートストラップ ルールに / を追加したり、場合によっては置き換えたりできるようにしました。

私はFirefoxの「検査」ツールを使用しています-Web開発者オプションの下にあります。ページに適用する必要があると思われるスタイルに取り消し線が引かれていることがわかります。ここでスタックオーバーフローに関する別の投稿を読みましたが、これはスタイルが上書きされたことを意味します。しかし、これが上書きされる理由や、この問題をさらにトラブルシューティングする方法がわかりません。

css ルール自体はメディア クエリです。ブラウザーのサイズを確認して、サイズに応じて画像を変更しようとしています。ブラウザのサイズを変更するにはどうすればよいですか? 手動ではなく、Firefox のレスポンシブ デザイン ビュー ツールを使用しています。

上書きされるルールは次のとおりです。

@media (max-width: 360px) {
.hero-unit h1 {
  margin-bottom: 0;
  font-size: 0.2em;
  line-height: 1em;
  letter-spacing: -5px;
  color: inherit;
}
.hero-unit p {
  font-size: 0.2em;
  font-weight: 50;
  line-height: 1em;
  color: inherit;
}   
.hero-unit {
  background: url("../img/1.jpg");
  padding: 1em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}   
}

これは適用されているものです：

@media (max-width: 979px){
.hero-unit h1 {
  margin-bottom: 0;
  font-size: 2.0em;
  line-height: 1.5;
  letter-spacing: -1px;
  color: inherit;
}
.hero-unit p {
  font-size: 1.2em;
  font-weight: 20;
  line-height: 1.5em;
  color: inherit;
}   
.btn-large {
  padding: 6px 10px;
  font-size: 11px;
  line-height: normal;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}   
.hero-unit {
  padding: 1em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}
h2 {
  font-size: 1.5em;
  line-height: 2em;
}   

 }

どこが間違っているのか教えてもらえますか? ありがとう。

編集1：

このcssが適用されるはずの実際のhtmlは次のとおりです。

  <div class="container"> 
    <div class="span8">
          <div class="hero-unit">
            <h1>&nbsp;</h1>
            <h1>&nbsp;</h1>
            <h1>&nbsp;</h1>
            <h1>&nbsp;</h1>
            <h1>&nbsp;</h1>
          </div>

           <div class="row-fluid">
                <div class="span4">
                    <h2>list 1 </h2>
                    <p>list</p>
                    <p><a class="btn" href="<?php echo base_url();?>index.php/list1/"><i class="icon-list-alt"></i> View details &raquo;</a></p>
               </div><!--/span-->

                <div class="span4">
                    <h2>list2</h2>
                    <p>some other list</p>
                    <p><a class="btn" href="<?php echo base_url();?>index.php/list2/"><i class="icon-globe"></i> View details &raquo;</a></p>
               </div><!--/span-->


                <div class="span4">
                    <h2>routes</h2>
                    <p>list of all routes</p>
                    <p><a class="btn" href="<?php echo base_url();?>index.php/routes/"><i class="icon-globe"></i> View details &raquo;</a></p>
                </div><!--/span-->          
            </div>      
        </div>

css で定義された背景画像を持つヒーローユニットです。これがこれを行うための最良の方法であるかどうかはわかりませんが、ほとんどの場合、機能しているようです。ありがとうございました。

4

1 に答える 1

2

ブラウザの幅が360pxで、CSSのmax-width: 979pxが下にある場合は、どちらも360pxのブラウザ幅にmax-width: 360px適用されるため、優先されます。

下に移動max-width: 360pxするか、を設定し@media (max-width: 979px) and (min-width: 361px)ます。

また、これはCSSの優先順位についての良い読み物です。http：//www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

于 2012-10-02T12:51:15.143 に答える