媒体查询---移动设备

一、移动端开发特点 
1、移动设备上的浏览器版本基本上为主流浏览器，所以，不需要像PC端开发一样将浏览器的兼容性放在首位。 
2、每一款移动设备的内核不同，分别有webkit、IOS 
3、分辨率不同。分辨率越高，图片显示就越小。 
二、什么是适配 
个人的理解是，通过一定的方式来进行页面的处理，达到在各个分辨率和屏幕大小的移动设备均可正常显示的效果 
三、如何解决 
解决适配问题，除了利用js、window.resize之外，最常用的便是通过css3中的媒体查询来进行移动端的适配。那么，接下来便是我整理的一些使用媒体查询来进行各个移动端的适配解决。 
①1.0版本


@media screen and(min-width: 320px)and(max-width: 359px){ 
    html{ 
        font-size: 12.8px; 
    } 
} 
@media screen and(min-width: 360px)and(max-width: 374px){ 
    html{ 
        font-size: 14.4px; 
    } 
} 
@media screen and(min-width: 375px)and(max-width: 385px){ 
    html{ 
        font-size: 15px; 
    } 
} 
@media screen and(min-width: 386px)and(max-width: 392px) { 
    html { 
        font-size: 15.44px; 
    } 
} 
@media screen and(min-width: 393px)and(max-width: 400px){ 
    html{ 
        font-size: 16px; 
    } 
} 
@media screen and(min-width: 401px)and(max-width: 414px){ 
    html{ 
        font-size: 16.48px; 
    } 
} 
@media screen and(min-width: 750px)and(max-width: 799px){ 
    html{ 
        font-size: 30.72px; 
    } 

} 

②2.0版本 
1、IPhone 
（1）IPhone 4和IPhone 4S 
a、Portrait and Landscape


@media only screen   
  and (min-device-width: 320px)   
  and (max-device-width: 480px)  
  and (-webkit-min-device-pixel-ratio: 2) {  

}  

2）IPhone 5和IPhone 5S 
a、Portrait and Landscape


@media only screen   
  and (min-device-width: 320px)   
  and (max-device-width: 568px)  
  and (-webkit-min-device-pixel-ratio: 2) {  

}  

 （3）IPhone 6 
a、Portrait and Landscape

@media only screen   
  and (min-device-width: 375px)   
  and (max-device-width: 667px)   
  and (-webkit-min-device-pixel-ratio: 2) {   

}  
2018-7-9 10:42:27
Answer﹏厮守 °