1.媒体查询
媒体查询可以为不同媒介的类型设置不同的样式，大部分媒体特性都接受min和max属性
只有当<meta name="viewport">视口标签存在的时候，才能使用媒体查询@media标签来实现分辨率的不同 进行调用不同的样式
2.媒体查询语法及两种使用方式
后续开发使用最多的是link链入媒体查询
第一种：在样式表中内嵌媒体查询@media
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title><style>* {margin: 0px;padding: 0px;}.header {background-color: orange;color: white;padding-left: 15px;font-size: 20px;}.nav {background-color: #949694;color: white;height: 30px;line-height: 30px;padding-left: 20px;}.nav ul {list-style: none;/* background-color: green; */}.nav ul li {width: 100px;/* background-color: red; */float: left;}@media all and (max-width: 1024px) {/* 适合普通分辨率桌面浏览器和横屏的ipad */.nav {background-color: pink;}}@media all and (max-width: 768px) {/* 适合很低分辨率桌面浏览器和竖屏ipad */.nav {background-color: skyblue;}}@media all and (max-width: 480px), all and (max-width: 320px) {/* 适合iphone和Android */.nav {background-color: yellowgreen;}.nav li a {display: none;}}@media all and (max-width: 240px) {/* 适合低分辨率移动设备 */.nav {display: none;}}</style></head><body><div class="header"><h1>购乐乐后台管理</h1></div><div class="nav"><ul><li>后台首页</li><li><a href="#">商品管理</a></li><li><a href="#">订单管理</a></li><li><a href="#">评论管理</a></li><li><a href="#">广告管理</a></li><li><a href="#">系统管理</a></li></ul></div></body></html>
第二种：在link链入样式中使用媒体查询@media
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" href="css/landspace%20iPad.css" media="all and (max-width: 1024px)"><link rel="stylesheet" href="css/vertical%20iPad.css" media="all and (max-width: 768px)"><link rel="stylesheet" type="text/css" href="css/iPhoneOrAndroid.css" media="all and (max-width: 480px),all and (max-width: 320px)" /><link rel="stylesheet" type="text/css" href="css/move.css" media="all and (max-width: 240px)"><title></title><style>* {margin: 0px;padding: 0px;}.header {background-color: orange;color: white;padding-left: 15px;font-size: 20px;}.nav {background-color: #949694;color: white;height: 30px;line-height: 30px;padding-left: 20px;}.nav ul {list-style: none;/* background-color: green; */}.nav ul li {width: 100px;/* background-color: red; */float: left;}</style></head><body><div class="header"><h1>购乐乐后台管理</h1></div><div class="nav"><ul><li>后台首页</li><li><a href="#">商品管理</a></li><li><a href="#">订单管理</a></li><li><a href="#">评论管理</a></li><li><a href="#">广告管理</a></li><li><a href="#">系统管理</a></li></ul></div></body></html>
