@media screen解决移动web开发的适配问题

使用@media screen之前先加入viewport，否则@media screen是无效的：

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

content属性值：

width：可视区域的宽度，值可为数字或关键词device-width
height：同width
intial-scale：页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0,minimum-scale=1.0：可视区域的缩放级别，maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上
user-scalable：是否可对页面进行缩放，no 禁止缩放

css代码：

/* phone */
@media screen and (max-width: 640px){
   
}
@media screen and (max-width: 480px){
   
}
@media screen and (max-width: 320px){
   
}