媒体查询

1、引不同的css文件

0、screen打印页面时用到，可以直接省略。 1、当屏幕的宽度大于等于400px的时候，应用styleA.css

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

2、当屏幕的宽度大于600小于800时，应用styleB.css

<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

2、style 标签

/*当屏幕尺寸小于600px时，应用下面的CSS样式*/
@media screen and (max-width: 600px) { 
    .class {
        background: #ccc;
     }
}

3、Media具体用法

@media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;
    }
}

4、自适应写法

注意顺序

@media (min-width: 1024px){
  body{font-size: 18px}
} /*>=1024的设备*/
@media (min-width: 1100px) {
  body{font-size: 20px}
} 
@media (min-width: 1280px) {
  body{font-size: 22px;}
} 
@media (min-width: 1366px) {
  body{font-size: 24px;}
}  
@media (min-width: 1440px) {
  body{font-size: 25px !important;}
} 
@media (min-width: 1680px) {
  body{font-size: 28px;}
} 
@media (min-width: 1920px) {
  body{font-size: 33px;}
}

用min-width时，要反着来

@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }