CSS3--媒体查询

• 什么是媒体查询?

  • 媒体查询就是获取到当前浏览器的宽度之后, 根据不同的宽度设置元素不同的样式

• 媒体查询的注意点

  • 由于媒体查询需要根据不同的浏览器宽度调整元素的样式, 所以不适合用于比较复杂的网页

• 媒体查询的格式

  • 在这里的media可以理解为英文的if(如果)
    @media 条件{} 含义: 如果条件满足, 那么就执行后面{}中的代码
  • 内联格式: @media 条件{}

 /*如果当前的网页是显示在电脑or平板or手机上的, 并且当前浏览器的宽度是大于等于1200px的, 那么就执行后面大括号中的代码*/
        @media screen and (min-width: 1200px){
            div{
                width: 500px;
                height: 500px;
                background: red;
            }
        }
        /*如果当前的网页是显示在电脑or平板or手机上的, 并且当前浏览器的宽度是小于等于1199px的, 那么就执行后面大括号中的代码*/
        @media screen and (max-width: 1199px){
            div{
                width: 300px;
                height: 300px;
                background: green;
            }
        }
        /*如果当前的网页是显示在电脑or平板or手机上的, 并且当前浏览器的宽度是小于等于768px的, 那么就执行后面大括号中的代码*/
        @media screen and (max-width: 768px){
            div{
                width: 100px;
                height: 100px;
                background: blue;
            }
        }

• 外链格式: <link rel="stylesheet" href="css/xxx.css" media="条件">

| <!-- |
|  | 1.在企业开发中, 如果需要分别给电脑/平板/手机分别设置样式, 那么我们会将电脑的样式写在前面, 平板的样式写在电脑的后面, 手机的样式写在平板的后面 |
|  | 2.在企业开发中媒体查询中指定的宽度不是固定的, 指定的宽度是根据自己企业的需求来指定的, 并没有一个固定的值代表电脑的, 也没有一个固定的值代表平板的, 也没有一个固定的值代表手机的 |
|  | --> |
|  | <link rel="stylesheet" href="媒体查询CSS/index-pc.css" media="screen and (min-width: 1200px)"> 
|  | <link rel="stylesheet" href="媒体查询CSS/index-pad.css" media="screen and (max-width: 1199px)"> 
|  | <link rel="stylesheet" href="媒体查询CSS/index-phone.css" media="screen and (max-width: 768px)">