0

私はサイトに取り組んでおり、それにレスポンシブデザインを実装しています。これは初めてで http://resizemybrowser.com/、サイトのテストに使用しています。

ヘッダー、ミドル、フッター部分のサイズ変更のようにブラウザ（クロム）のサイズを変更すると、すべてが正常に機能しますサイトのメイン中央部分のみを除くブラウザ ウィンドウは、757px 以降ではうまく機能しません。メイン部分の css スタイルは「.hero」で、メイン スタイルのスタイル:

.hero {width: 930px;color: #444;margin: 0 auto;}.hero のメディア クエリはMax 、 maxなど
@media (max-width: 979px).hero {width: 750px;color: #444;margin: 0 auto;}
@media (max-width: 767px).hero {width: 650px;color: #444;margin: 0 auto;}
と同じです。 . 問題は .hero の主要部分が応答しないことです After は常に、(800 ,960,1024,1280,1366 px ) のような他の幅のブラウザー ウィンドウが応答性が高く、.hero の幅が変化することを示しています。width:1200pxwidth:480px

width of 757px.hero width is 750px320 , 480 ,640 ,720 px
私はこの主要部分に行き詰まっています。そのための解決策を見つけてください、、、事前に感謝します

4

1 に答える 1

3

メディア クエリには、次のように別の括弧が必要です。

@media (max-width: 979px) {
    .hero {
        width: 750px;
        color: #444;
        margin: 0 auto;
    }
}
于 2013-08-26T16:20:27.903 に答える