Html5-CSS自适应样式

一，常见分辨率（电脑、平板、手机、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-1441px) { （2k以上）    
@media only screen and (max-1440px) { （2k）    
@media only screen and (max-1200px) { （包含1080）    
@media only screen and (max-960px) { （2010年到2016年间的笔记本和屏幕）    

2.手机端(适配手机与手机真实分辨率无关)：

@media only screen and (max-600px) { （或者760px与480px）    

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

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

三，其他适配：

1.横屏竖屏：

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

@media all and (orientation :landscape){}    

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

@media all and (orientation :portrait){}