メディアクエリは何ですか
メディアクエリ（メディアクエリ）は、新しいCSS3の構文です。
- @mediaクエリを使用して、あなたは異なるメディアタイプごとに異なるスタイルを定義することができます
- @mediaは、異なる画面サイズごとに異なるスタイルを設定することができます
- あなたは、プロセスのブラウザのサイズをリセットすると、ページがブラウザの幅と高さに応じてページを再レンダリングされます
- 現在、アップルの携帯電話、Android携帯電話、タブレット、その他のデバイスの多くは、マルチメディアのために使用されています
メディアクエリ構文仕様
- @記号に@media、注意を払うで始まります
- MEDIATYPE：メディアタイプ
- キーワード：と、ない、だけ
- メディアの特徴：メディアのプロパティは、括弧を含める必要があります
@media mediatype and|not|only (media feature) {
CSS-Code;
}1.mediatypeクエリの種類
メディアタイプと呼ばれる異なるタイプに、異なる端末装置、
2.キーワード
主要なメディアタイプの特性以上のメディアは、メディアクエリの条件として一緒に接続されています。
- そして：メディア特性の複数の、互いに「および」手段に相当を接続することができます。
- ない：メディアタイプ、「非」との同等除くと、省略することができます。
- のみ：特定のメディアタイプを指定するには、それは省略することができます。
3.メディアのプロパティ
各メディアタイプは、メディアタイプのメディア特性に応じて異なる表示スタイルを設定するために、独自の異なる特性を持っています。私たちは3を理解しましょう。
彼らは括弧が含まれている追加することに注意してください。
（1）メディアのお問い合わせは、ルールを書きます
注：混乱を防止するために、メディアクエリは、我々は書き込みに昇順または降順にしたい,,私たちのお気に入りはまだ大に小型のようなコードより簡潔に書くこと。
demo:媒体查询案例修改背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 */
/* 2. 小于540px 页面的背景颜色变为蓝色 */
@media screen and (max-width: 539px) {
body {
background-color: blue;
}
}
/* 3. 540 ~ 970 我们的页面颜色改为 绿色 */
/* @media screen and (min-width: 540px) and (max-width: 969px) {
body {
background-color: green;
}
} */
@media screen and (min-width: 540px) {
body {
background-color: green;
}
}
/* 4. 大于等于970 我们页面的颜色改为 红色 */
@media screen and (min-width: 970px) {
body {
background-color: red;
}
}
/* 5. screen 还有 and 必须带上不能省略的 */
/* 6. 我们的数字后面必须跟单位 970px 这个 px 不能省略的 */
</style>
</head>
<body>
</body>
</html>demo：媒体查询+rem实现元素动态变化.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* html {
font-size: 100px;
} */
/* 从小到大的顺序 */
@media screen and (min-width: 320px) {
html {
font-size: 50px;
}
}
@media screen and (min-width: 640px) {
html {
font-size: 100px;
}
}
.top {
height: 1rem;
font-size: .5rem;
background-color: green;
color: #fff;
text-align: center;
line-height: 1rem;
}
</style>
</head>
<body>
<div class="top">购物车</div>
</body>
</html>
4. Aリソース（理解）
スタイルの範囲を比較すると、我々は、異なるメディアごとに異なるスタイルシート（スタイルシート）を使用することができます。原理は、決定された装置の大きさに直接リンクされ、その後、別のCSSファイルを参照します。
（1）構文仕様
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">（2）実施例
<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 当我们屏幕大于等于 640px以上的，我们让div 一行显示2个 */
/* 当我们屏幕小于640 我们让div一行显示一个 */
/* 一个建议： 我们媒体查询最好的方法是从小到大 */
/* 引入资源就是 针对于不同的屏幕尺寸 调用不同的css文件 */
</style>
<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">
</head>
<body>
<div>1</div>
<div>2</div>
</body>
</html>style320.css
div {
width: 100%;
height: 200px;
}
div:nth-child(1) {
background-color: pink;
}
div:nth-child(2) {
background-color: seagreen;
}style640.css
div {
float: left;
width: 50%;
height: 200px;
}
div:nth-child(1) {
background-color: #ccc;
}
div:nth-child(2) {
background-color: #0ff;
}