Day13 媒体查询

1.准备工作：

设置Meta标签<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum- scale=1.0,minimum-scale=1.0, user-scalable=no">

这段代码的几个参数解释：

width = device-width：宽度等于当前设备的宽度

initial-scale： 初始的缩放比例（默认设置为1.0）

minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）

maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）

user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

 2）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 -->

2.媒体查询结构

@media screen and (min-width:320px) and (max-width:750px){
    body{ 
        background-color:blue;
    }
}