响应式布局-----媒体查询

        第一次写博，在这里记录和分享一些自己学到的东西，最重要的还是看看大牛们的博客，学习学习经验，毕竟作为一名即将面临秋招的大三党，学习和积累已经是刻不容缓的事情了。

        博主是一名学过C、C++、Java但都不怎么精通的技术渣，在大二暑假决定要走向前端这条不归路，在这期间自学了html+css、js、jquery和一些常用的PS切图技术，也有几个简单的项目开发经验，但看了各大公司的招聘要求感觉还是远远不够的，于是乎，博主便打算在这个暑假竭尽全力，冲刺秋招！

------------------------------------------------------------------------------此上为前言可忽略-------------------------------------------------------------------------------------

1. 响应式布局需要媒体查询的原因

        响应式布局，即为针对任意设备对网页内容进行完美布局的一种显示机制，而媒体查询便可以让我们根据设备显示器的特性为其设定CSS样式，它是由媒体类型和一个或多个检测媒体特性的条件表达式组成的。

2.媒体查询可以检查到的特性

• width：视口宽度
• height：视口高度
• device-width：设备屏幕宽度
• device-height：设备屏幕高度
• orientation：设备放置为横向还是纵向
• aspect-ratio：视口的宽高比
• device-aspect-ratio：设备屏幕的宽高比
• color：每种颜色的位数
• color-index：设备的颜色索引中的颜色数，为非负整数
• monochrome：检测单数缓冲区中没像素所用的位数
• resolution：设备的分辨率
• scan：电视机的扫描方式
• grid：检测输出设备是网格设备还是位图设备
  

3. 媒体查询语法

•         在css文件内进行媒体查询

        eg： 对<div class="box"></div> 在不同的设备中进行css设置

.box{
    width: 400px;
    height: 200px;
    margin: 0 auto;
    background-color: red;
}
@media screen and (max-width: 960px){
    .box{
        background-color: #000000;
    }
}
@media screen and (max-width: 768px){
    .box{
        background-color: #323232;
    }
}
@media screen and (max-width: 550px){
    .box{
        background-color: #eeeeee;
    }
}
@media screen and (max-width: 320px){
    .box{
        background-color: #8800ee;
    }
}

•    @import url("common.css") screen (max-width: 768px);
  

   使用CSS中的@import指令在当前样式表中按条件引入其他样式表，但是此操作会增加HTTP请求（影响加载速度），所以要谨慎使用
  

•         在外部式引入css进行媒体查询

          同样是上面的用例：         

1. <link rel="stylesheet" type="text/css" media="screen" href="common.css">

   设备为显示屏时引入common.css文

   <link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" 
   href="common.css">
   

   设备为纵向放置的显示屏时引入cmmon.css文件

2. <link rel="stylesheet" type="text/css" media="not screen and (orientation:portrait)"
   href="common.css">

   设备为非纵向放置的显示屏时引入common.css文件

3. <link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)
   and (min-width:800px)" href="common.css">

   条件的并列，设备为纵向放置的显示屏并且视口宽度大于800px时引入common.css文件

4. <link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)
   and (min-width:800px),projection" href="common.css">

   媒体查询列表，用逗号隔开的查询条件只要有一个为真便加载common.css文件，全部为假则不加载