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 lang="en">
<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 id="xxx">我是一些文字</div>
</body>
</html>
关于max-width的媒体查询示例：
<!DOCTYPE html>
<html lang="en">
<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 id="xxx">我是一些文字</div>
</body>
</html>
关于区间于多少的媒体查询示例：
<!DOCTYPE html>
<html lang="en">
<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 id="xxx">我是一些文字</div>
</body>
</html>
媒体查询适用于适应布局：
<!DOCTYPE html>
<html lang="en">
<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 id="xxx">左边的朋友</div>
<div id="yyy">右边的朋友</div>
</div>
</body>
</html>
