为何使用meta标签进行适配

1，设置min-width:320px,    max-width:480px的时候，min-width 会重写最大宽度里设置的属性。

二，（1）在设置css的像素的时候，比如设置width:300px  如果用户进行缩放的时候，此时在手机上的设备像素是不等于30px的。如果是缩小了，css的像素是小于设备像素的，此时就会出现，一个设备像素会小于css像素，看图

（2）如果 使用 百分比的话，一般的设置的css像素 是比 设备像素稍微大一点，

（3）若给css加上<meta name = "viewport width= "device-width"> ,此时设备的足够小，足够窄的话，当前的页面大小（局部视图的宽度）会自动的适应设备的大小。文字显示正确。如图3

但是不使用meta标签，也不给视图加上宽度的话，视图会被挤压，文字显示的不清楚。如图2

总而言之，使用媒体查询，更能解决不同的手机的是配的问题。