一，常见分辨率（电脑、平板、手机、TV）

1.电脑:

主流2k 2560×1440
主流 　1920*1080
1680*1050
1440*900
上代笔记本主流1366*768
1024x768

2.平板:

主流1920*1080
主流1920*1200（2000 x 1200）     
2560×1600
ipad 768*1024

3.手机:

（1）IOS：

主流xs1125x2436 （iph12 1170x2532）

（2）Android：

1344×2772
主流1080×2400（1080x2448 1080×2376 1080*2340 1080×2388 1125×2436 1170×2532）
xr828x1792（720x1560）
375*812

4.TV

没TV需求，略过

二，通用方案：

1.电脑端与平板端： 
@media only screen and (min-width:1441px) { （2k以上）    
@media only screen and (max-width:1440px) { （2k）    
@media only screen and (max-width:1200px) { （包含1080）    
@media only screen and (max-width:960px) { （2010年到2016年间的笔记本和屏幕）
  • 1.
  • 2.
  • 3.
  • 4.
2.手机端(适配手机与手机真实分辨率无关)： 
@media only screen and (max-width:600px) { （或者760px与480px）
  • 1.

举例：@media (max-width: **) {...}中加入css样式，例 “1280*任何值" 的分辨率：

1 @media (max-width: 1280px) {
2   .sb-search {
3      right: 4em; 
4   } 
5   .logo a {
6      width: 100%;
7      font-size: 1.2em; 
8   }
9 }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

三，其他适配：

1.横屏竖屏： 
/* 这是匹配横屏的状态，横屏时的css代码 */    

@media all and (orientation :landscape){}    

/* 这是匹配竖屏的状态，竖屏时的css代码 */    

@media all and (orientation :portrait){}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

作者：꧁执笔小白꧂