@media

メディアクエリの適用方法

linkラベルで適用

<link href="css/common.css" rel="stylesheet" type="text/css" media="screen and (min-width:0px) and (max-width:480px)">

cssファイルにメディアルールを直接適用する

@media all and (min-width:480px) { ... }

cssファイルからmediaルールが設定されたファイルをインポートして適用

/* common.css */
@import "../media.css";

/* media.css */
@media screen and (min-width:768px) { ... }

メディアクエリーのプリファレンスの設定

@media 타입 and (기능) { 스타일 }

480 px以上のメディアタイプについて

@media (min-width:480px) { ... }

/* 위와 아래의 경우는 동일한 기능 수행 */
/* 즉, all이 기본값으로 생략가능하고 그로인해 and 역시 생략이 가능합니다. */

@media screen and (min-width:480px) { ... }

メディアタイプ480 pxから768 px

@media screen and (min-width:480px) and (max-width:768px) { ... }

andを使用してすべての条件を満たすメディアタイプ

/* 모든 조건을 만족해야 css 적용됩니다. */
@media screen and (min-height:640px) and (min-width:480px) { ... }

非負の演算によるメディアタイプ

/* 부정 연산은 반드시 미디어 타입이 명시되어야한다 */
@media not all and (max-width: 700px) and (min-width: 400px) { ... }

画面の縦幅が横幅より大きい

@media (orientation: portrait) { ... }

画面の横幅が縦幅より大きい

@media (orientation: landscape) { ... }

参考資料