ホーム>source

まだ新しいですが、これで少し遊んでみました。 CSS親.articleで高さを設定しています。 @mediaの高さを768未満にしようとすると、何も起こりません。

https://jsfiddle.net/avryx/1wusmqn6/21/

<前>ウィズウィズ * { margin: 0px; padding: 0px; box-sizing: border-box; } @media screen and (max-width:767px) { .article { padding: 5% 10%; height: 1000px; } } .article { background-color: #404040; height: 470px; width: 80%; margin-left: auto; margin-right: auto; border-radius: 10px; margin-top: 2%; margin-bottom: 2%; }
あなたの答え
  • 解決した方法 # 1

    CSSが上から下に読み取られるためです。最後に設定されたルールが実行されるルールなので、 @media を使用します   .article の下 、 このような:

    <前>ウィズウィズ

    デモ

    * { margin: 0px; padding: 0px; box-sizing: border-box; } .article { background-color: #404040; height: 470px; width: 80%; margin-left: auto; margin-right: auto; border-radius: 10px; margin-top: 2%; margin-bottom: 2%; } @media screen and (max-width:767px) { .article { padding: 5% 10%; height: 1000px; } }

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ c - ファイルマッピングとファイルシステムの同期