媒体查询（media query）
响应式布局适合一些低成本的网站

利用媒体查询，可以为不同的设备，不同的屏幕大小这设置不同的样式，可以根据设备的能力应用特定的css样式，比如，可以根据视口宽度，屏幕宽高比改变页面中元素的样式

用法

  1. @media 查询条件{
  2.   样式
  3. }

媒体类型

  • all 适用于所有的设备

    @media all{
background-color:#ff0;
}

  • print 适用于打印样式

  • screen 适用于屏幕
  • only screen 和screen效果一样
    • screen 表示仅仅对显示屏应用该样式
    • only主要用于解决兼容性的问题
  • speech 适用于阅读器

一般媒体查询都会以only screen开头

媒体功能

  • width，min-width，max-width 视口宽度
    • min-width 相当于大于等于
    • max-width 相当于小于等于
@media  (width:800px) {
        body{
            background-color: green;
        }
}

    @media only screen and (min-width:800px) {
        body{
            background-color: green;
        }
}
  • height，min-height，max-height 视口高度
  • aspect-ratio 宽高比

  • orientation 视口方向

    • portratit 纵向
    • landscape 横向
      @media (orientation:landscape) {
   body{
       background-color: green;
   }
}

  • resolution 像素密度

    多条件

    @media screen,print {
  body{
    background-color: green;
  }
}

    运算符

    ,逗号
    把两个或多个特性连接到一起，要求有一个特性满足即可成立

and
把两个或多个特性连接到一起，要求每一个特性必须要成立，查询才会生效，表示两个条件必须同时满足

not**
对所有结果取反，如果所有条件都满足则不应用样式（必须写在开头）
not不是对某个条件进行取反，而是对整个条件

    @media not screen and (min-width:800px) {
        body{
            background-color: green;
        }
}


only**
只有新版浏览器才识别能识别的关键字，用于区分不支持的浏览器

断点

断点就是某个宽度的临界点，跨过这个点布局就会发生显著的变化

  • 超小屏幕 768以下
  • 小屏幕 大于等于768
  • 中等屏幕 大于等于992
  • 大屏幕 大于等于1200