了解媒体查询
-
@media 媒体查询
screen 屏幕
and 并且
width: 600px 宽度600px当媒体查询检测到屏幕宽度为 600px 的时候，执行花括号内写 css 代码。 注意：媒体查询是满足条件后，才会执行花括号内的代码，不满足则不执行。
<style>
/*
@media 媒体查询
screen 屏幕
and 并且
width: 600px 宽度600px
当媒体查询检测到屏幕宽度为 600px 的时候，执行花括号内写 css 代码。
注意：媒体查询是满足条件后，才会执行花括号内的代码，不满足则不执行。
*/
@media screen and (width: 600px) {
/* 花括号内写 css 代码 */
body {
background-color: red;
}
}
@media screen and (width: 800px) {
body {
background-color: green;
}
}
@media screen and (width: 1000px) {
body {
background-color: blue;
}
}
</style>
</head>
<body>
<h1>哈哈</h1>
</body>
</html>
媒体查询关键字 screen 屏幕 print 打印
<style>
/* screen 屏幕 */
@media screen {
h1 {
font-size: 12px;
}
}
/* print 打印 */
@media print {
h1 {
font-size: 120px;
}
}
</style>
</head>
<body>
<h1>不同媒体类型设置不同的字号</h1>
</body>
</html>
媒体查询特性
- .(width: 1000px) 媒体特性，需要用小括号包起来
and 逻辑操作符，两边至少留一个空格
<style>
@media screen {
.box {
background-color: pink;
}
}
/*
(width: 1000px) 媒体特性，需要用小括号包起来
and 逻辑操作符，两边至少留一个空格
*/
@media screen and (width: 1000px) {
.box {
background-color: blue;
width: 800px;
margin: 0 auto;
}
}
</style>
</head>
<body>
<div class="box">这是不同屏幕宽度下，一个会变色的盒子</div>
</body>
</html>
屏幕方向
- orientation 屏幕方向（屏幕的宽高比例）
landscape 横屏（屏幕宽度更大）
portrait 竖屏（屏幕高度更大）
<style>
/* 不受媒体查询约束，所有屏幕下都生效的代码 */
.box {
display: none;
}
/*
orientation 屏幕方向（屏幕的宽高比例）
landscape 横屏（屏幕宽度更大）
portrait 竖屏（屏幕高度更大）
*/
@media screen and (orientation: landscape) {
.box {
display: block;
}
}
</style>
</head>
<body>
<div class="box">网页提示：请把屏幕旋转后再浏览当前网页</div>
</body>
</html>
最大宽度
max-width 最大宽，不是固定值，表示一个范围宽度，最大宽800px 其实表示 0~800px 范围
<style>
/*
max-width 最大宽，不是固定值，表示一个范围宽度，最大宽800px 其实表示 0~800px 范围
*/
@media screen and (max-width: 800px) {
.box {
background-color: blue;
}
}
@media screen and (width: 800px) {
.box {
/* 样式层叠性，把蓝色覆盖掉了，最终 800px 的时候是粉色 */
background-color: pink;
}
}
</style>
</head>
<body>
<div class="box">盒子</div>
</body>
</html>
最小宽度
*注意最小宽度，一般都有一个取值范围，在 多少 ~ 多少 之间 然后执行什么效果：参考如下：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
background-color: pink;
margin: 0 auto;
width: 100%;
}
/*
min-width: 768px 768px~无限大
*/
@media (min-width: 768px) {
.container {
width: 750px;
}
}
/*
min-width: 992px 992px~无限大
*/
@media (min-width: 992px) {
.container {
width: 970px;
}
}
/*
min-width: 1200px 1200px~无限大
*/
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
</style>
</head>
<body>
<div class="container">版心</div>
</body>
</html>