开发过自适应网站或者做过自适应WordPress主题的朋友都知道，网页自适应其实是通过CSS3的media query实现的。代码写好了，在各个手机上显示效果是什么样子的呢？是不是我们每种宽度的手机或平板电脑都要找来测试一遍呢？这当然是不可能的，就算有条件，这么多设备，估计测试的时间就要占网站开发时间的一半了。
其实只要掌握了移动设备的屏幕宽度信息，针对某一宽度范围内的设置写专门的CSS，然后找其中的一两款测试就可以了，因为是自适应，宽度用的是百分比，只要在测试的这两款设备上没问题，在屏幕宽度差不多的设备上应该也是没有问题的。下面是一些常见设备的屏幕宽度。
需要注意的是：屏幕宽度并不是屏幕的分辨率像素宽度，这是初学自适应的朋友最容易弄错的一点。
一些主流的手机尺寸：
| 设备型号 | 屏幕宽度 | 流行度 |
| iPhone 4 (4, 4S) | 320 | 8.8% |
| Galaxy SIII | 360 | 8.8% |
| iPhone 5 (5c, 5s) | 320 | 7.9% |
| Galaxy SII | 320 | 6.4% |
| Google Nexus 4 by LG | 384 | 6.1% |
| Galaxy Note II | 360 | 3.7% |
| iPhone (Original – 3GS) | 320 | 2.9% |
| Galaxy Note | 400 | 2.9% |
| Nokia Lumia 920 | 384 | 2.7% |
| Nokia Lumia 720 | 320 | 2.4% |
| HTC One | 360 | 1.9% |
| BlackBerry Q10 | 360 | 0.6% |
| BlackBerry Z10 | 384 | 0.5% |
一些主流的平板电脑尺寸
| 设备型号 | 屏幕宽度 | 流行度 |
| Apple iPad 1 & 2 | 768 | 25.0% |
| Apple IPad 3 & 4 | 768 | 24.9% |
| Google Nexus 10 by Samsung | 800 | 10.5% |
| Samsung Galaxy Tab 10.1 | 533 | 4.2% |
| Samsung Galaxy Tab 2 10.1 | 800 | 4.0% |
| Asus Nexus 7 (2012) | 603 | 3.6% |
| Apple iPad Mini | 768 | 2.4% |
| Amazon Kindle Fire HD 8.9″ | 800 | 2.0% |
| Amazon Kindle Fire HD 7″ | 533 | 2.0% |
| BlackBerry PlayBook | 1024 | 1.6% |
| Asus Nexus 7 (2013) | 600 | 1.2% |
| Microsoft Surface Pro | 1280 | 0.7% |
| Microsoft Surface | 1366 | 0.6% |
| Galaxy Note 10.1 | 800 | 0.6% |
| Motorola Xoom | 853 | 0.2% |
写media query css时的代码建议
下面的代码出自网易的uec项目，使用的时候只需要把这段代码拷贝到CSS文件的末尾，然后针对不同宽度的设备写CSS即可。
/* 横屏 */
@media screen and (orientation:landscape){}
/* 竖屏 */
@media screen and (orientation:portrait){}
/* 窗口宽度<960,设计宽度=768 */
@media screen and (max-width:959px){}
/* 窗口宽度<768,设计宽度=640 */
@media screen and (max-width:767px){}
/* 窗口宽度<640,设计宽度=480 */
@media screen and (max-width:639px){}
/* 窗口宽度<480,设计宽度=320 */
@media screen and (max-width:479px){}
/* windows UI 贴靠 */
@media screen and (-ms-view-state:snapped){}
/* 打印 */
@media print{}
