媒体查询的引入方式
1.内部方式引入
“`html
<style>
body {
background-color: red;
}
/* 横屏 宽大于高 */
@media screen and (orientation: landscape) {
body {
background-color: yellow;
}
}
/* 竖屏 高大于宽 */
@media screen and (orientation: portrait) {
body {
background-color: pink;
}
}
</style>
“`
2.外链式
“`css
在html的head标签的内部使用link标签引入外部的css文件（后缀名为.css的文件）
<head>
<link rel=”stylesheet” href=”./css/demo.css”>
</head>
body {
background-color: pink;
}
/* 横屏 宽大于高 */
@media screen and (orientation: landscape) {
body {
background-color: tomato;
}
}
/* 竖屏 高大于宽 */
@media screen and (orientation: portrait) {
body {
background-color: yellowgreen;
}
}
<!– 只有横屏时有样式 –>
<link rel=”stylesheet” href=”./css/demo.css” media=”screen and (orientation: landscape)”>
<!– 只有竖屏时有样式 –>
<link rel=”stylesheet” href=”./css/demo.css” media=”screen and (orientation: portrait)”>
“`
3、媒体查询常见的媒体尺寸设置
通过媒体查询，针对不同的设备的尺寸设置断点来改变布局
“`html
屏幕 设备 断点
超小屏幕 手机 <768px
小屏幕 平板 >=768px ~ <992px
中等屏幕 桌面 >=992px ~ <1200px
大屏幕 桌面 >=1200px
常用媒体查询尺寸：
1200px
1100px 1000px 1024px
980px
768px 720px
640px
480px
375px
320px
280px
“`
4、移动设备优先
“`css
移动设备优先：超小屏幕 超小型设备（手机，768px以下）
小屏幕 768px-992px
@media screen and (min-width:768px) { … } /* 小型设备（平板电脑，768px 以上） */
中等屏幕 992px – 1200px
@media screen and (min-width:992px){ … }/* 中型设备（台式电脑，992px 以上） */
大屏幕 大于1200px
@media screen and (min-width:1200px){ … }/* 大型设备（大台式电脑，1200px 以上） */
“`
案例：
“`html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<style>
/*在移动端看 移动端显示的颜色 768px屏幕以下*/
body {
background-color: orange;
}
/* 小屏幕 768px-992px 屏幕宽度在768px以上显示的颜色*/
@media screen and (min-width: 768px) {
body {
background-color: yellow;
}
}
/* 中等屏幕 992px – 1200px*/
@media screen and (min-width: 992px) {
body {
background-color: tomato;
}
}
/* 大屏幕 大于1200px*/
@media screen and (min-width: 1200px) {
body {
background-color: pink;
}
}
</style>
</head>
<body>
</body>
</html>
“`
5、大屏幕设备优先
“`css
大屏幕设备优先：大屏幕 桌面在1200px以上 大型设备（大台式电脑，1200px 以上）
中等屏幕 992px-1200px
@media screen and (max-width:1200px) { … } /* 中型设备（台式电脑，1200px 以下） */
小屏幕 768px-992px
@media screen and (max-width:992px){ … }/* 小型设备（平板电脑，992px 以下） */
超小屏幕 768px屏幕以下
@media screen and (max-width:768px){ … }/* 超小型设备（手机，768px 以下） */
或者
@media screen and (max-width:768px){ … }/* 超小型设备（手机，767px 以下） */
/* 注意：此时超小屏幕和小屏幕在768px之间有冲突，怎么解决？
把超小屏幕的区间降低1px*/
“`
案例：
“`html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<style>
/* 屏幕大于1200px显示的颜色 */
body {
background-color: green;
}
/* 中等屏幕 992px-1200px 屏幕宽度在1200px以下显示的颜色*/
@media screen and (max-width:1200px) {
body {
background-color: tomato;
}
}
/* 小屏幕 768px-992px*/
@media screen and (max-width:992px) {
body {
background-color: pink;
}
}
/* 注意：此时超小屏幕和小屏幕在768px之间有冲突，怎么解决？
把超小屏幕的区间降低1px*/
/* 超小屏幕 768px屏幕以下*/
@media screen and (max-width:767px) {
body {
background-color: orange;
}
}
</style>
</head>
<body>
</body>
</html>