响应式及媒体查询

好久没用媒体查询了, 今天用突然得去翻资料了.

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