媒体查询

媒体查询是界面为了适应不同屏幕大小而存在的

基本语法是：

@media mediatype and（在）|  not（不再）|only （仅在）(media feature （设备尺寸）) {

       CSS-Code;

 }

body{
            background-color:grey;	//正常情况是灰色
        }
        @media screen and (max-width:960px){     //分辨率最大不超过960的情况下，背景色为红色
            body{ background-color:red;}
        }
        @media screen and (max-width: 768px){
            body{
                background-color:orange;
            }
        }
        @media screen and ( max-width: 550px){
            body{
                background-color:yellow;
            }
        }

阻止移动浏览器自动调整页面大小

ios和android浏览器都基于webkit内核，这两种浏览器和许多其它浏览器都支持用viewport meta元素覆盖默认的画布缩放设置。只需要在HTML的标签中插入一个标签，meta标签中可以设置具体的宽度或缩放比。下面为示例

      

  name=”viewport”  说明此meta标签定义视口的属性

  initial-scale=2.0   意思是将页面放大两倍

  width=device-width   告诉浏览器页面的宽度等于设备宽度

  允许用户将页面最大放大至设备宽度3倍，最小压缩至设备宽度的一半

 

  禁止用户缩放，可以在混合APP时，为了使html页面更逼真，使页面无法缩放

     //user-scalable=no是禁止缩放

  *浏览器宽和设备的宽是不一样的，如果让页面的宽等于设备的宽，并且使用同样的分辨率值来进行媒体查询，那么结果肯定是在小设备的情况下会出现滚动条，所以手机设备的媒体查询时的分辨率宽与实际的分辨率不同，一般媒体查询检测移动设备为320px