不同分辨率设备或不同窗口大小下网页布局经常是不同的,一不小心就会发生错位。可以利用@media screen 实现网页布局的自适应,但是怎样兼容所有主流设备就成了问题。到底分辨率是多少的时候设置呢？首先看下面的代码,这是从 bootstrap 中遍历出来的，min-width 来确认分别是 768、992、1200。当然了过去也有些设备宽度是 600、480 的，那些小分辨率的我们都归类为小于 767 的。
为什么是小于 767 而不是 768 呢，那是因为在 css 中@media (min-width: 768px)表示最小是 768 也就是大于等于768，这里有等于，所以我们判断更小的设备用@media (max-width: 767px)表示小于等于767 就不会有冲突了。
@media print
@media（min-width:768px）{}
@media（min-width:992px）{}
@media（min-width:1200px）{}
@media（max-width:767px){}
从上面我们可以看出有几个临界点的分辨率，那么我们就可以轻松的来写自己的自适应代码了
@media (min-width:768px){ //大于等于768px 的设备 }
@media (min-width:992px){ //大于等于992px 的设备 }
@media (min-width:1200){ //大于等于1200px 的设备 }
注意下顺序，如果你把@media (min-width: 768px)写在了下面那么很悲剧。
@media (min-width:1200px){ //大于等于1200px 的设备 }
@media (min-width:992px){ //大于等于992px 的设备 }
@media (min-width:768px){ //大于等于768px 的设备 }
因为如果是 1440,由于 1440>768 那么你的 1200 就会失效。
所以我们用 min-width 时，小的放上面大的在下面(从小到大)，同理如果是用 max-width 那么就是大的在上面，小的在下面(从大到小)
@media (max-width:1199px){ //小于等于1199px 的设备 }
@media (max-width:991px){ //小于等于991px 的设备 }
@media (max-width:767px){ //小于等于768px 的设备 }
经过了上面的入门学习，我们就可以灵活的来点高级的混合应用了,将一个页面用到的关键分辨率和对应设备列出如下：
@media and (min-width:1200px){//大于等于1200px 的设备}
@media and (min-width: 960px) and (max-width:1199px) {
//小于等于1199px and 大于等于960px 的设备:PC 端;}
@media and (min-width: 768px) and (max-width:959px) {
//小于等于959px and 大于等于768px 的设备：PC 端;}
@media and (min-width: 640px) and (max-width:767px) {
//小于等于767px and 大于等于640px 的设备：平板端或者手机横屏;}
@media and (min-width: 480px) and (max-width:639px) {
//小于等于639px and 大于等于480px 的设备：手机横屏;}
@media and (min-width: 320px) and (max-width:479px) {
//小于等于479px and 大于等于320px 的设备：手机竖屏;}
@media and (min-width: 240px) and (max-width:319px) {
//小于等于479px and 大于等于320px 的设备：手机竖屏;}
@media and (max-width:239px){//小于等于239px 的设备:手机竖屏}
另外仅在浏览屏幕设备上设置不同设备的响应式,可在 media 后加上 only screen,用到的关键分辨率和对应设备列出如下：
@media only screen and (min-width:1200px){//大于等于1200px 的设备}
@media only screen and (min-width: 960px) and (max-width:1199px) {
//小于等于1199px and 大于等于960px 的设备:PC 端;}
@media only screen and (min-width: 768px) and (max-width:959px) {
//小于等于959px and 大于等于768px 的设备：PC 端;}
@media only screen and (min-width: 640px) and (max-width:767px) {
//小于等于767px and 大于等于640px 的设备：平板端或者手机横屏;}
@media only screen and (min-width: 480px) and (max-width:639px) {
//小于等于639px and 大于等于480px 的设备：手机横屏;}
@media only screen and (min-width: 320px) and (max-width:479px) {
//小于等于479px and 大于等于320px 的设备：手机竖屏;}
@media only screen and (min-width: 240px) and (max-width:319px) {
//小于等于479px and 大于等于320px 的设备：手机竖屏;}
@media only screen and (max-width:239px){
//小于等于239px 的设备:手机竖屏}