1

Media Query を少し適用しようとしています。

メディアクエリのない CSS

blockquote {
margin: 1.5em 0;
font-family: 'Gentium Basic', Georgia, serif;
font-size: 20px;
line-height: 1.6em;
font-weight: normal;
font-style: italic;
border-left: 1px dotted;
padding: 0 0 0 25px;
left: 50%;
margin-left: -150px;
width: 650px;
}

次に適用されます：

/* larger than 800px */
@media only screen and (min-width: 801px) {
  #mobileNav {
    height: 0 !important;
  }
}
/* 800px and smaller */
@media only screen and (max-width: 800px) {
  #bannerImage {
    background-attachment: scroll !important;
  }

blockquote {
margin: 1.5em 0;
font-family: 'Gentium Basic', Georgia, serif;
font-size: 20px;
line-height: 1.6em;
font-weight: normal;
font-style: italic;
border-left: 1px dotted;
padding: 0 0 0 25px;
}

サイトはこちら

私がやろうとしているのは、blockquote を画面に合わせることです。現在、ページの幅が変更されたときにこれを行います。

ここに画像の説明を入力

これをしたいとき：

ここに画像の説明を入力

4

1 に答える 1

3

widthメディア クエリで を定義していない場合はwidth、一般的なスタイルシート (この場合は ) で定義されたを使用するだけなので、メディア クエリ ルール ブロックで再度650px定義する必要があります。width

@media only screen and (max-width: 800px) {
    blockquote {
       margin: 1.5em 0;
       font-family: 'Gentium Basic', Georgia, serif;
       font-size: 20px;
       line-height: 1.6em;
       font-weight: normal;
       font-style: italic;
       border-left: 1px dotted;
       padding: 0 0 0 25px;
       width: 100%; /* Specify some width here */
       /* You should use auto value as you are using margins and paddings */
    }

    /* Other styles goes here */
}

注: ここに貼り付けたメディア クエリにスタイルしかない場合は、メディア クエリ ブロックを閉じていないことをお知らせします。

デモ

于 2013-07-28T11:45:53.580 に答える