【笔记】媒体查询Media Querier

1.viewport：

作用：允许开发这创建一个虚拟的窗口(viewpoint),并自定义其窗口的大小或缩放功能。

如果未定义viewpoint，浏览器会有默认大小：

AndroidBrowser:800px;

ie浏览器:974px;

Opera浏览器:850px;

2.使用viewport：  

在meta元素中使用

<meta name="viewport" content=""/>

content的属性有六个：

width,height  如width=device-width

initial-scale:指定初始缩放比例, 如：initial-scale=1 

maximum-scale,minimum-scale指定用户缩放的最大比例/最小比例

user-scalable指定用户能否手动缩放,如：user-scalable=0//不允许用户手动缩放

3,media querier媒体查询

可视区域的宽度最大值为600px的时候应用该样式表

    <pre name="code" class="html"><link rel="stylesheet" media="screen and(max-width:600px)" href="style1.css"/>

<span style="white-space:pre">	</span>在style1.css中需要写对应的样式：

    <pre name="code" class="html"><pre name="code" class="html">@media screen and (min-width:600px)  and(max-width:900px){
        .demo{
               width:50%;
        }

}

当可视区域的宽度在600px到900px的时候应用style2.css

     <link rel="stylesheet" media="screen and(min-width:600px) and(max-width:900px)" href="style2.css"/>

<span style="white-space:pre">	</span>在style2.css中： 

<pre name="code" class="html">@media screen and (min-width:600px) and(max-width:900px){
        .demo{
               width:50%;
        }

}

<span style="font-family: Arial, Helvetica, sans-serif;"><span style="white-space:pre">	</span>当移动设备的宽度是480px的时候</span>

<pre name="code" class="html"><link rel="stylesheet<span style="font-family: Arial, Helvetica, sans-serif;">" media="screen and(max-device-width:480px)" href="style3.css"/> </span>

<pre name="code" class="html">@media screen and (max-device-width:480px){
        .demo{
               width:480px;
        }

} <span style="font-family: Arial, Helvetica, sans-serif;">	</span>

<span style="font-size:18px;">4.横竖屏portrait landscape</span>

<pre name="code" class="html"><link rel="stylesheet" media="all and(orientation:portrait)" href="portrait.css"/>

<pre name="code" class="html"><link rel="stylesheet" media="all and(orientation:landscape)" href="landscape.css"/>

<link rel="stylesheet" media="all and(orientation:portrait)" href="portrait.css"/>