HTML5 媒体查询
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
浏览器支持：
style.css
/* CSS Document */
.test{ width:100%; height:400px;}
/*下面的样式会在可视区域的宽度小于 599px 的时候被应用。*/
@media screen and (max-width: 599px) {
.test {
background: #f60;
}
}
/*下面的样式会在可视区域的宽度大于 901px 的时候被应用。*/
@media screen and (min-width: 901px) {
.test {
background: #06f;
}
}
/*你还可以使用过个匹配条件，下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。*/
@media screen and (min-width: 600px) and (max-width: 900px) {
.test {
background: #f06;
}
}demo.html
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>CSS3 媒体查询</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="test"> </div> </body> </html>
demo2.html
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="basic.css"> <link rel="stylesheet" media="screen and (max-width: 599px)" href="max599.css" /> <link rel="stylesheet" media="screen and (min-width: 600px) and (max-width: 900px)" href="min600max900.css" /> <link rel="stylesheet" media="screen and (min-width: 901px)" href="min901.css" /> <title>CSS3 媒体查询</title> </head> <body> <div class="test"> </div> </body> </html>
效果图：
相关推荐
wusiye 2020-10-23
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
nercon 2020-08-01
swiftwwj 2020-07-21
nercon 2020-07-16
饮马天涯 2020-07-05
Lophole 2020-06-28
gufudhn 2020-06-12
csstpeixun 2020-06-11
huzijia 2020-06-09
WebVincent 2020-06-06
行吟阁 2020-05-30
qsdnet我想学编程 2020-05-26
gufudhn 2020-05-25
qsdnet我想学编程 2020-05-19
suixinsuoyu 2020-05-15
HSdiana 2020-05-15
PioneerFan 2020-05-15