媒体查询:
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title></title> | |
<style> | |
.a{ | |
border: 1px solid #000000; | |
width: 100px; | |
height: 100px; | |
background-color: #000000; | |
} | |
@media only screen and (min-width: 300px) and (max-width: 640px) { | |
.a{ | |
background-color: red; | |
} | |
} | |
@media only screen and (min-width: 700px) { | |
.a{ | |
background-color: green; | |
} | |
} | |
@media only screen and (max-width:200px ) { | |
.a{ | |
background-color: blue; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<div class="a"></div> | |
</body> | |
</html> | |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title></title> | |
<link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet"> | |
<style> | |
/*通配符选择器*/ | |
[class*="col-"]{ | |
border: 1px solid gray; | |
} | |
@media only screen and (max-width: 768px) { | |
#demo{ | |
display: none; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container-fluid"> | |
<div class="row"> | |
<div id="demo" class="col-lg-2 col-md-1 col-sm-1">左侧导航</div> | |
<div class="col-lg-8 col-md-11 col-sm-11 col-lg-offset-2">右侧内容</div> | |
</div> | |
</div> | |
</body> | |
</html> | |