二十六、媒体查询2

目录：

1. 媒体查询介绍
2. 网页常用分界点

一、媒体查询介绍

媒体特性：
width 视口的宽度
height 视口的高度
一般设计的时候，高度不考虑，只考虑宽度

//当视口的宽度是500像素的时候,变颜色
 @media (width: 500px) {
        body{
            background-color: #bfa;
        }
        
      }

问题：这里的500px太过于精确。
解决： 优化下，用范围更灵活。
min-width 视口的最小宽度(视口大于指定宽度时生效)
max-width 视口的最大宽度(视口小于指定宽度时生效)

 /* 大于500就变颜色 */
      @media (min-width: 500px) {
        body{
            background-color: #bfa;
        }
        
      }

二、网页常用分界点

样式切换的分界点，我们称其为断点，也就是网页的样式会再这个点时发生变化；
比如看到的很多网页，当视口不断缩小，到某个点，会突然变成竖屏界面展示 。

  各种范围上限,大部分网站用的是这个规则：
  小于768 超小屏幕  max-width=768px     比如：手机
  大于768 小屏幕   min-width = 768px  
  大于992 中型屏幕 min-width = 992px    ipad
  大于1200 大屏幕   min-width = 1200px

 /* 大于500就变颜色 */
      @media (min-width: 500px) {
        body{
            background-color: #bfa;
        }
        
      }

      /* 大于500或者小于700变颜色 */
      @media (min-width: 500px), (max-width:700px) {
        body{
            background-color: #bfa;
        }
        
      }

      /* 如果写500 到 700之间 ， and ：与 */
      @media (min-width: 500px) and (max-width:700px) {
        body{
            background-color: #bfa;
        }
        
      }

        /* 表示除了500 - 700之外 */
      @media not screen (min-width: 500px) and (max-width:700px) {
        body{
            background-color: #bfa;
        }
        
      }

这种写法是最常用的写法：

      /* 完整写法，加上媒体类型 only screen*/
      @media only screen (min-width: 500px) and (max-width:700px) {
        body{
            background-color: #bfa;
        }
        
      }