触屏版开发之设备宽度设置

happy175

在触屏版开发的过程中，对屏幕宽度的设置往往很难把握，究竟多少为一个区间呢？今天把自己的设置习惯记录下来，如果有更好的方案大家一起探讨哈！
首先，我把周围朋友同事的机型调查了一番。其中最多的是：苹果5/s、MX2、小米3、苹果4/s、三星(就拿这几款为例吧)
设备宽分别为：

机型	苹果5/s	苹果4/s	三星	小米3	MX2
设备宽	320	320	320	360	400

所以，我的设置区间为: 320-360、360-400、400-480、480-640、640++这样就可以覆盖包括山寨机在内的所有机型。

1. @media screen and (min-width: 320px) and (max-width: 359px){
   
2. //设备宽度在320-359区间的样式
   
3. }
   
4. @media screen and (min-width: 360px) and (max-width: 399px){
   
5. //设备宽度在360-399区间的样式
   
6. }
   
7. @media screen and (min-width: 400px) and (max-width: 479px){
   
8. //设备宽度在400-479区间的样式
   
9. }
   
10. @media screen and (min-width: 480px) and (max-width: 639px){
    
11. //设备宽度在480-640区间的样式
    
12. }
    
13. @media screen and (min-width: 640px){
    
14. //设备宽度在640以上的样式
    
15. }

复制代码

那么，为什么我们还要关注设备的分辨率呢？

首先，我们来看下分辨率是什么：

分辨率是指在长和宽的两个方向上各拥有的像素个数。一个像素有多大呢？主要取决于显示器的分辨率，相同面积不同分辨率的显示屏，其像素点大小就不相同。

这也就不难解释为什么一个100*100的icon图标，在PC端或者分辨率低的设备上看到正常，但在苹果手机上面却是模糊的了。

解决方法：

以前，我会将矢量图标（注意：是矢量图标，位图放大了也白搭）放大，然后再用css样式等比缩小来定义。