@media媒体查询

• 目录

  媒体查询：为不同尺寸的屏幕设定不同的CSS样式

  @media常用参数 

  ---

• 媒体查询：为不同尺寸的屏幕设定不同的CSS样式

• 例：设置屏幕尺寸在100px-300px时#div0的背景色为红色（screen意思是屏幕，如果不打印只是为了显示有或没有，那么写不写它都可以

• <style>
      #div0{
          width:150px;
          height:200px;
      }
      @media screen and (min-device-width:100px) and (max-device-width:300px){
          #div0{
              background-color:red;
          }
      }
  </style>

• @media常用参数 

• max-width、max-height、min-width、min-height：设置浏览器可视宽度、高度
• max-device-width、max-device-height、min-device-width、min-device-height：设置设备屏幕的宽度、高度
• 一般情况下不设置高度，用and连接

• 媒体查询的引入方式（三种）

1. 写在<style></style>内部，如上例
2. 写在<style>标签中，有条件的执行某个内部样式表

   <style>
       #div0{
           width:150px;
           height:200px;
       }
   </style>
   <style media = "(min-device-width:100px) and (max-device-width:300px)">
       #div0{
           background-color:red;
       }
   </style>

3. link引入：写在Link标签中，有条件的引入外部样式表

   <link href="css/test.css" rel="stylesheet">
   <link href="css/test1.css" rel="stylesheet" 
           media="(min-width:100px) and (max-width:300px)">