bootstrap之媒体查询示例
bootstrap媒体查询示例
媒体查询示例语法：
min-width：
@media screen and (min-width: 500px) {
//这里的screen and可以省略，但是括号前面必须要和前面的@media间隔一个空格
// 样式：
#xxx {
font-size: 80px;
background-color: blueviolet;
}
}
max-width：
@media screen and (max-width: 1200px) {
#xxx {
font-size: 80px;
background-color: blueviolet;
}
}
大于900px 小于1200px
/*大于多少小于多少的方式就不存在会被顺序影响*/
@media (max-width: 1200px) and (min-width: 900px){
#xxx {
font-size: 80px;
background-color: blueviolet;
}
}
/*小于1200px大于900px变成blueviolet颜色*/
关于min-width的媒体查询示例
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <style> #xxx { color: #fff; } #xxx { font-size: 16px; background-color: blue; } /*min意思就是大于多少，这里就是大于500px 注意的是：min要从小到大写，不然会被覆盖了 */ @media screen and (min-width: 500px) { #xxx { font-size: 80px; background-color: blueviolet; } } @media screen and (min-width: 600px) { #xxx { font-size: 80px; background-color: #b2dba1; } } @media screen and (min-width: 700px) { #xxx { font-size: 50px; background-color: yellow; } } @media screen and (min-width: 800px) { #xxx { font-size: 30px; background-color: red; } } @media screen and (min-width: 900px) { #xxx { font-size: 80px; background-color: pink; } } @media screen and (min-width: 1000px) { #xxx { font-size: 80px; background-color: greenyellow; } } @media screen and (min-width: 1100px) { #xxx { font-size: 80px; background-color: deeppink; } } @media screen and (min-width: 1200px) { #xxx { font-size: 80px; background-color: greenyellow; } } </style> <div >我是一些文字</div> </body> </html>
关于max-width的媒体查询示例：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
#xxx {
color: #fff;
}
#xxx {
font-size: 16px;
background-color: blue;
}
/*超过1200px的就填充蓝色*/
@media screen and (max-width: 1200px) {
#xxx {
font-size: 80px;
background-color: blueviolet;
}
}
/*小于1200px变成blueviolet颜色*/
@media screen and (max-width: 900px) {
#xxx {
font-size: 50px;
background-color: yellow;
}
}
/*小于900px变成yellow颜色*/
@media screen and (max-width: 600px) {
#xxx {
font-size: 80px;
background-color: #b2dba1;
}
}
/*小于600px变成#b2dba1颜色*/
</style>
<div >我是一些文字</div>
</body>
</html>
关于区间于多少的媒体查询示例：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
#xxx {
color: #fff;
}
#xxx {
font-size: 16px;
background-color: blue;
}
/*超过1200px的就填充蓝色*/
/*大于多少小于多少的方式就不存在会被顺序影响*/
@media (max-width: 1200px) and (min-width: 900px){
#xxx {
font-size: 80px;
background-color: blueviolet;
}
}
/*小于1200px大于900px变成blueviolet颜色*/
@media (max-width: 600px) and (min-width: 0px){
#xxx {
font-size: 80px;
background-color: #b2dba1;
}
}
/*小于600px大于0px变成#b2dba1颜色*/
@media (max-width: 900px) and (min-width: 600px){
#xxx {
font-size: 50px;
background-color: yellow;
}
}
/*小于900px大于600px变成yellow颜色*/
</style>
<div >我是一些文字</div>
</body>
</html>
媒体查询适用于适应布局：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--布局：窗体<600px时，两个div上下摆放，两个div宽度都是100%
窗体>600px时，两个div并排摆放，第一个div款60%，第二个div40%
-->
<style>
<!--这里是div元素，所以本来就要换行，所以先给div本来的style
然后再设置媒体查询样式
-->
#xxx {
width: 400px;
height:400px;
background-color: blue;
}
#yyy {
width: 800px;
height: 400px;
background-color: yellow;
}
@media (min-width: 800px){
#xxx {
float: left;
width: 60%;
}
#xxx {
float: left;
width: 40%;
}
}
</style>
<div>
<div >左边的朋友</div>
<div >右边的朋友</div>
</div>
</body>
</html>