媒体查询

媒体查询

用media

• 设备：
  屏幕：PC 手机端
  打印机
  屏幕阅读器
  尺寸：
  常见尺寸 320-420之间

• 响应式网页：同一个网页，在不同的条件下（不同的设备，不同的宽度），使用不同的样式。
  

  rem/百分比：等比例缩放。

• 【注】
  使用min-width时，通常将小的条件放在前面。
  使用max-width时，通常将大的条件放在前面

• 实现方式：
  1、内嵌式：

       格式：@media 设备名 逻辑关键词（and , not）（条件）{
           样式；
       }
  

<style media="screen">
        h1{
            font-size: 24px;
            color: brown;
        }
    </style>
    <style media="print">
        h1{
            font-size: 48px;
            color: seagreen;
        }
    </style>