更新于 

Media Queries 媒体查询

MDN文档：使用媒体查询
可查询参数

width

常见屏幕尺寸适配：

  • 手机尺寸：320px-480px
  • 平板电脑： 481px - 1024px
  • 大屏幕电脑： 1025px以上
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@media (max-width: 480px){
    .phone{
        background-color: #023047;
    }
}
@media (min-width: 481px) and (max-width:1024px){
    .tablet{
        background-color: #ffb703;
    }
}
@media (min-width: 1025px){
    .pc{
        background-color: #fb8500;
    }
}