好久没用媒体查询了, 今天用突然得去翻资料了.
1: 先说下容易混淆的概念,max-width 和 min-width
(1): 说下响应式的max-width 和 min-width
min-width
div{ miin-width: 1000px}
意思是一个盒子的最小宽度是1000px,
最终效果就是 :
当缩小浏览器窗口, 如果此时浏览器宽度在1000px以上时, 盒子会自动收缩,
直到缩小到1000px时 则盒子宽度不在自动收缩, 如果此时继续缩小浏览器, 则会出现横向的滚动条
max-width
div{ max-width: 1000px}
意思是一个盒子的最大宽度是1000px,
最终效果就是 :
当缩小浏览器窗口, 如果此时浏览器宽度在1000px以上时, 盒子宽度不变始终是1000px的宽, 直到浏览器缩小到1000px以下时 盒子则会自动收缩宽度, 知道最小
<1>顺便说一嘴min-height max-height
min-height
假设有一个大盒子内有一个小盒子, 大盒子类名 lg , 小盒子类名 sm
.lg{
width: 200px;
min-height: 50px;
background-color: red;
}
.sm{
width: 150px;
min-height: 100px;
background-color: blue;
}
大盒子设置最小高度
(50)小于内部的小盒子的最小高度(100)
效果为大盒子和小盒子高度都为(100)
因为大盒子被小盒子的高度撑了起来
.lg{
width: 200px;
min-height: 100px;
background-color: red;
}
.sm{
width: 150px;
min-height: 50px;
background-color: blue;
}
大盒子设置最小高度
(100)小于内部的小盒子的最小高度(50)
效果为大盒子(100)和小盒子高度都为(50)
互不干扰
max-height
.lg{
width: 200px;
max-height: 100px;
background-color: red;
}
.sm{
width: 150px;
max-height: 50px;
background-color: blue;
}
大盒子设置最大高度
(100)内部的小盒子的最大高度(50)
效果为大盒子(0)和小盒子高度都为(0)
这是最大高度是没有高度显示的
(2): 说下媒体查询的max-width 和 min-width
// max-width
@media (max-width: 960px) {
.four_type_1,.four_type_2,.four_type_3,.four_type_4 {
width: 100%;
}
.homeMainContent ul li:not(.mediaChangeFontSize){
font-size: 16px;
}
}
这里的最大宽度960px, 意思是
在浏览器宽度为960px以下时会执行下面的css样式
@media (min-width: 1200px) {
.homeMainContent ul li:not(.mediaChangeFontSize){
font-size: 18px;
}
}
这里最小宽度1200px, 意思是
在浏览器宽度为1200px以上时会执行下面的css
2: and混合写法
@media (min-width: 960px)and(max-width: 1200px) {
.homeMainContent ul li:not(.mediaChangeFontSize){
font-size: 12px;
}
.homeMainContent span{
width: 40%;
}
}
最小宽度960px, 最大宽度1200px 意思是
在浏览器宽度为960px, 和 1200px 之间时会执行以下的css
