CSS基础十五（响应式布局和媒体查询）

响应式布局

• 概念：根据不同的分辨率，显示不同的样式
• 主要修改的样式
  • 元素的隐藏与显示
  • 宽度
  • 浮动排列
  • 文本对齐方式
  • 字体大小
• 优点：适配性好
• 缺点：
  • 增大工作量
  • 出现大量的隐藏元素，导致代码量冗余
  • 一般用在小网站

媒体查询

  @media 设备类型 and (媒体特性){}

• 设备类型
  • all 所有的设备
  • screen 显示器/笔记本/移动端设备
  • print 打印机
• 媒体特性
  • min-width(比最小值大)/max-width(比最大值小)
  • 媒体特性的值后面不要加分号
  • 多个媒体特性之间用and连接
  • and两侧必须有空格

    <style>
      /* @media 设备类型 and 媒体特性{} */
      /* 设备宽度>1000 body显示红色 */ 
      @media screen and (min-width:1000px) {
          body {
              background-color: red;
          }
      }
      /* 设备宽度500-1000 body显示蓝色 */
      
      @media screen and (min-width:500px) and (max-width:999px) {
          body {
              background-color: blue;
          }
      }
      /* 设备宽度<500 body显示粉色 */
      
      @media screen and (max-width: 499px) {
          body {
              background-color: pink;
          }
      }
  </style>

;
}
}