css 适配 媒体查询 @media

1、基础用法：小于某个宽度时固定

• 格式

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

• 例子

@media screen and (max-width:1372px){
    body{
         min-width: 1344px;
     }  
}

2、移动端适配

@media screen and (min-width:321px) and (max-width:375px){html,body {font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html,body {font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html,body{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html,body{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html,body{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html,body{font-size:23.5px}}
@media screen and (min-width:800px){html,body{font-size:25px}}

3、自适应代码
临界点的分辨率，那么我们就可以轻松的来写自己的自适应代码了

@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }

• 所以我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面

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

4、高级的混合应用

@media screen and (min-width:1200px){ #page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px} } 
 @media screen and (min-width: 960px) and (max-width: 1199px) { #page{ width: 960px; }#content,.div1{width: 650px;}#secondary{width:250px}select{max-width:200px} }
 @media screen and (min-width: 768px) and (max-width: 959px) { #page{ width: 900px; }#content,.div1{width: 620px;}#secondary{width:220px}select{max-width:180px} }
 @media only screen and (min-width: 480px) and (max-width: 767px){ #page{ width: 450px; }#content,.div1{width: 420px;position: relative; }#secondary{display:none}#access{width: 450px; }#access a {padding-right:5px}#access a img{display:none}#rss{display:none}#branding #s{display:none} } 
@media only screen and (max-width: 479px) { #page{ width: 300px; }#content,.div1{width: 300px;}#secondary{display:none}#access{width: 330px;} #access a {padding-right:10px;padding-left:10px}#access a img{display:none}#rss{display:none}#branding #s{display:none}#access ul ul a{width:100px} }

5、screen
上面的代码中用到了 screen这里指定了显示器为显示设备，也可以是print打印机等其他设备，一般我们用screen。或者干脆省略。如果想看详细的关于media的说明可以百度一下关于media query的知识
6、针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">