css媒体查询

媒体查询使用方式

方式1

  <style>
    @import url('./test.css') (max-width: 800px);
  </style>

方式2

  <link rel="stylesheet" href="./test.css" media="(max-width: 800px)">

方式3

<style>
  @media (min-width: 500px) and (max-width: 800px) {
    body {
      background-color: pink;
    }
  }
</style>

媒体类型

all 所有设备
print 打印预览模式下，屏幕上查看分页材料和文档
screen 屏幕
speech 语音合成器

媒体特性

媒体特性用表达式书写，可以用逻辑运算符
每条表达式用括号括起来