CSS3多媒体查询 （@Media Queries）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
/*大屏幕-只要没低于1200橙色*/
@media screen and (min-width: 1200px) {
body {
background-color: navajowhite;
}
}
/*平板电脑与小屏电脑之间的分辨率-768-1199蓝色*/
@media screen and (min-width: 768px) and (max-width:1199px) {
body {
background-color: royalblue;
}
}
/*横向放置的手机和竖向放置的平板之间的分辨率-376-767紫色*/
@media screen and (min-width:376px) and (max-width:767px) {
body {
background-color: blueviolet;
}
}
/*手机分别率-低于375粉色*/
@media screen and (min-width: 375px) {
body {
background-color: pink;
}
}
</style>
</head>
<body>
</body>
</html>