随着技术的发展，时代的进步，智能手机已经成为了这个社会的最普遍的通讯设备。伴随着智能手机发展起来的移动端app也成为了这个时代的一个标志。身为一名IT行业人员，如今接触到的软件开发大多都已不再是PC端而是转向了移动端。移动端的出现方便每一个使用移动设备的人，同时，也为开发人员带来了如兼容IE浏览器般头疼的问题，那就是移动设备的适配问题。在谈论适配问题之前先说说移动端开发的特点以及什么是适配，又如何解决适配问题。
一、移动端开发特点
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) {
} b、Portrait
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
} c、Landscape
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
} （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) {
} b、Portrait
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
} c、Landscape
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
} （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) {
} b、Portrait
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
} c、Landscape
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
} （4）IPhone 6以上
a、Portrait and Landscape
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}b、Portrait
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
} c、Landscape
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
} 2、SAMSUNG Galaxy
(1)Galaxy S3
a、Portrait and Landscape
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {
} b、Portrait
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {
} c、Landscape
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {
} （2）Galaxy S4
a、Portrait and Landscape
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
} b、Portrait
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
} c、Landscape
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
} （3）Galaxy S5
a、Portrait and Landscape
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
} b、Portrait
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
} c、Landscape
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
} （4）Galaxy Tab 10.1
a、Portrait and Landscape
@media
(min-device-width: 800px)
and (max-device-width: 1280px) {
}b、Portrait
@media
(max-device-width: 800px)
and (orientation: portrait) {
} c、Landscape
@media
(max-device-width: 1280px)
and (orientation: landscape) {
} 3、HTC
a、Portrait and Landscape
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
} b、Portrait
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
} c、Landscape
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
} 4、iPads
（1）iPad mini
a、Portrait and Landscape
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
} b、Portrait
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
} c、Landscape
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
} （2）iPad 1 和iPad 2
a、Portrait and Landscape
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
} b、Portrait
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
} c、Landscape
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
} （3）iPad 3 和 iPad 4
a、Portrait and Landscape
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
} b、Portrait
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
} c、Landscape
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
} 5、Nexus
（1）Asus Nexus 7
a、Portrait and Landscape
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332) {
} b、Portrait
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: portrait) {
} c、Landscape
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: landscape) {
} 6、Kindle Fire
（1）Kindle Fire HD 7
a、Portrait and Landscape
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5) {
} b、Portrait
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
} c、Landscape
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
} （2）Kindle Fire HD 8.9
a、Portrait and Landscape
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5) {
} b、Portrait
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
} c、Landscape
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
} 7、Laptops
（1）Non-Retina Screens
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
} （2）Retina Screens
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
} 8、Apple Watch
（1）Apple Watch
@media
(max-device-width: 42mm)
and (min-device-width: 38mm) {
} （2）Moto 360 Watch
@media
(max-device-width: 218px)
and (max-device-height: 281px) {
} ③针对IPhone手机
@media only screen and (min-device-width: 320px){
//针对iPhone 3
}
@media only screen and (min-device-width: 320px)and (-webkit-min-device-pixel-ratio: 2) {
//针对iPhone 4, 5c,5s, 所有iPhone6的放大模式，个别iPhone6的标准模式
}
@media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 2) {
//针对大多数iPhone6的标准模式
}
@media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 3) {
//针对所有iPhone6+的放大模式
}
@media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio: 3) {
//针对所有iPhone6+的标准模式,414px写为412px是由于三星Nexus 6为412px，可一并处理
}