响应式布局

页面的大小可以通过响应式布局的方式，出现在不同的移动端或者PC端。

viewport

viewport作用： 使元素适用于不同的设备，防止元素被缩放

meta标签写在head里

<meta name="viewport content="width=device-width,initial-scale=1.0, maximum-scale=5.0, user-scalable=0”>

• width=device-width        可以设置一个固定的值，尽可能不这样使用，设置宽度为屏幕的宽度
• height=device-height     设置高度为屏幕的高度  height是设置高度使用的，我们很少使用
• initial-scale=0                 初始化的缩放比例
• maximum-scale=1.0      设置最大缩放比   0.25-10.0
• minimum-scale=1.0       设置最小缩放比   0.25-10.0
• user-scalable=no/yes     是否允许用户进行缩放网页（yes1/no0）如果为0，那么上述两值将                                           被忽略，因为不允许缩放

---

media媒体查询

使用media媒体查询可以进行页面在不同的浏览器窗口显示

两种使用方法

        内部查询： @media screen and (max-width:768px){css样式}

        外部查询： <link rel="stylesheet" href="css/pad.css" media="screen and (max-width:768px)">

        <p class="big_pc">big_pc</p>

         /* 内部媒体查询 */
        @media screen and (min-width:1200px){
            /* big_pc  */  
            .big_pc{
                display: block;
            }  
            body{
                background-color: blueviolet;  //紫
            }       
        }
        @media screen and (min-width:992px) and (max-width:1200px){
            /* big_pc  */  
            .big_pc{
                display: block;
            }  
            body{
                background-color: skyblue;    //蓝
            }       
        }