媒体查询介绍

媒体查询

@media

在css中嵌入“@media”的方式，开头必须书写“@media”，然后指定设备类型（使用screen代表电脑显示器）。

css中定义了10中设备类型：

设备特效参数13种：

针对屏幕的宽度：min-width max-width heigth

针对设备的宽度：min-device-width max-device-width device-heigth

针对设备的手持方向：orientation:landscape orientation:portrait

一、内嵌模式

//针对媒体屏幕的查询
@media screen and ( max-width:1000px) and (min-width:640px){

}

二、文件引入模式

<link rel="stylesheet" type="text/css" media="screen and (min-width:1000px)" rel="pc.css">

<link rel="stylesheet" type="text/css" media="screen and (max-width:1000px) and (min-width:640px)" rel="pad.css">

<link rel="stylesheet" type="text/css" media="screen and (max-width:639px) " rel="phone.css">

三、针对苹果Safari浏览器

即使在页面中已经写好了页面在小尺寸窗口运行的样式，iPhone中的Safari浏览器也不会使用这个样式，而是选择窗口宽度为980px时所使用的样式。所以我们需要在移动设备上设置原始大小显示和是否缩放的声明。是在页面的头部之间加上下面这样的语句：

或

meta标签的viewport属性是在移动设备上设置原始大小显示和是否缩放的声明：

可以使用的参数设置如下：

width: viewport的宽度

height: viewport的高度

initial-scale: 初始的缩放比例

minimum-scale：允许用户缩放到的最小比例

maximum-scale：允许用户缩放到的最大比例

user-scalable：用户是否可以手动缩放

如果在页面中已经准备好了在小尺寸的窗口中使用的样式，并且有可能在iPhone或者iPad touch中被打开时，请不要忘记加入标签并在标签中写入指定的窗口宽度。其实还可以通viewport把自己冒充成更宽的屏幕。