媒体查询

一、媒体查询
默认值写在最前面,或者给媒体查询样式添加important.
如果要使用max-width，条件值比较大的写在前面。
如果要使用min-width，条件值比较小的写在前面。
@media all and （max-width：600px（条件值））{
选择符{样式}
}
 @media all and (max-width:600px) {
            div {
                background: blue !important;
            }
        }
例子：
<style>
        html,
        body {
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        @media all and (min-width:320px) {
            body {
                background: red;
            }
        }

        @media all and (min-width:375px) {
            body {
                background: blue;
            }
        }
    </style>
二、理想化视口
在写移动端的时候必须写这个
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
三、根据不同设备引入不同的样式
  <link rel="stylesheet" href="..//css/css320.css" media="all and (min-width:320px)">
    <link rel="stylesheet" href="..//css/css375.css" media="all and (min-width:375px)">
四、布局方案
       固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸；
                      可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局；
       弹性布局（就是媒体查询）：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；
       混合布局：同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；只是混合像素、和百分比两种单位作为页面单位。
       布局响应：对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：pc优先（从pc端开始向下设计）；移动优先（从移动端向上设计）；               
                      无论基于那种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（发生布局改变的临界点称之为断点），
五、mate相关的属性
H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

忽略将页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" />

忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no" />

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari
<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- ios7.0版本以后，safari上已看不到效果 -->
将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!-- 可选default、black、black-translucent -->