响应式Viewport详解

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


  
 解释:    1, viewport 只有移动端才识别;
  content="width:300px":设置成和适配器一样的宽;
  content="device-width":特殊的值,可以达到各种设备的适配的宽;
2, initial-scale=1.0 : 默认的缩放比;正常的移动端缩放比;
3, user-scalable : 是否允许用户自行缩放;值,no允许 ;yes不允许;标准为no
4, maximum-scale:最大的缩放比例,大于0的数字;
  minimun-scale:最小的缩放比例,大于0的数字;






媒体查询的基本语法：
@media 媒体类型 and (媒体特性){css样式}
媒体查询的多特性语法
@media 媒体类型 and (媒体特性1) and (媒体特性2) ...｛css样式｝
将CSS样式设置在除了not制定的媒体类型之外的媒体上
@media not 媒体类型 and (媒体特性) and (媒体特性2)...｛CSS样式}


对于仅支持媒体类型不支持特性的媒体的限制
@media only 媒体类型 and (媒体特性) and (媒体特性)...{CSS样式}


内容优先 移动优先


/*例如:屏幕在640---1000之间宽度*/
@media screen and(min-width:640px) and (max-width:1000px){}


@media screen and (max-width:400px){}