css3 @media はレスポンシブなレイアウトを実装します_html/css_WEB-ITnose

css3 @media を使用すると、さまざまなメディアやさまざまな解像度で応答性の高いレイアウトを実現できます。

方法 1: 解像度に応じて異なる CSS ファイルを使用する

c169e67a6112fd2d2d42a12366732f10

例

<link rel="stylesheet" media="screen and (max-width: 1024px)" href="middle.css" /><link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

方法 2: 同じ CSS ファイルで、異なる解像度に応じて異なるスタイルを使用します

.first {background-color: white;}.second {background-color: black;}@media screen and (max-width: 800px) { /*当屏幕尺寸小于800px时，应用下面的CSS样式*/    .first {background-color: green;}    .second {background-color: skyblue;}}@media screen and (max-width: 480px) { /*当屏幕尺寸小于480px时，应用下面的CSS样式*/    .first {background-color: yellow;}    .second {background-color: red;}}

参考:

http://www.runoob.com/cssref/css3-pr-メディアクエリ。