媒体查询小结

引言

最近基于公司项目进行页面适配时，发现前辈基于媒体查询完成。为了更好理解媒体查询，总结并巩固下吧。

使用

媒体查询通过类似条件判断的方式完成不同屏幕像素下页面布局的调整。

1.常用三种写法

1. 基于min-width

min-width含义是指屏幕像素大于等于该像素都按此布局设置。

    @media screen and(min-width:400px) {
          .box{
            background-color: red;
          }
    }
    

2. 基于max-width

max-width含义是指屏幕像素小于等于该像素都按此布局设置。

@media screen and(min-width:400px) {
      .box{
        background-color: red;
      }
}

3.基于min与max的且

使用且运算符判断像素基于最小和最大范围内时完成布局

    @media screen and(min-width:400px) and (max-width:600px) {
      .box{
        background:red
      }
    }
    

2.屏幕多像素适配实践

根据上面三种适配表达式，我们可以设计多种适配方案。但其仍存在部分坑点问题。

假设现在有如下需求，屏幕像素小于等于800时展示红色背景，800<x<1000时展示绿色，大于1000的显示黑色背景。

仅使用min-width

如下是正确使用min-witdh适配多屏幕尺寸的姿势。此处有很多小伙伴会发现自己适配时存在无效的情况，坑点就是min-width的列举必须是从小到大列举，不能先列举1000再列举800.否则会无效。

 .box{
     background:red
 }
 @media screen and(min-width:800px) {
  .box{
    background:green
  }
}
@media screen and(min-width:1000px) {
  .box{
    background:black
  }
}

仅使用max-width

如下是正确使用max-witdh适配多屏幕尺寸的姿势。与min-witdh相同的注意点是，max-width列举时必须按照从大到小的顺序列举，否则也会失效。

 .box{
     background:black
 }
 @media screen and(max-width:1000px) {
  .box{
    background:green
  }
}
@media screen and(min-width:800px) {
  .box{
    background:red
  }
}

总结

0. min-width指屏幕大于等于该像素下方案，max-width指屏幕小于等于该像素下方案
1. 基于min-width适配多屏幕像素时，必须按照从小到大顺序适配
2. 基于max-width适配多屏幕像素时，必须按照从大到小顺序适配