媒体查询

媒体查询

两种引入方式

• 内嵌

  • 设置单个值

  • <style>
    @media screen and (width:400px){   
      body{
        background-color:red;
      }
    }
    </style>

  • 设置最大最小值

    <style>
    @media screen  and (min-width:600px) and (max-width:400px){   
      body{
        background-color:red;
      }
    }
    </style>

  ​

• 外链

  虽然可以这样设置，但是建议尽量少去使用这种方式

  <link rel="stylesheet" href="./text.css" media="screen and (width:300px)">

  ​