移动端---媒体查询

1.响应式布局介绍:一个html页面适配多个不同的设备

    优点:全适配(一个html文件就可以适配所有的屏幕)

    缺点:不便于维护(响应式布局其实把多个页面的css写在了一个html中,造成css代码冗余)

2.核心原理:使用媒体查询技术,根据不同的设备尺寸加载不同的样式

3.媒体查询语法

1. 标准语法  @media screen and(设备尺寸) {css样式}        简写: @media(设备尺寸) {css样式}    注意:括号里不需要添加分号
2.  区间查询   设备尺寸>=区间:@media(min-width:1200px) {css样式}     设备尺寸<=区间:@media(max-width:1200px) {css样式}

3. 常见的四种设备尺寸

   大PC >=1200px body红色

   小pc/ipad pro 992-1200px body橙色

   平板(ipad) 768-992 body黄色

   手机(iphne) <768 body绿色

4.术语

• 媒体类型

媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备。

类型名称	值	描述
屏幕	screen	带屏幕的设备
打印预览	print	打印预览模式
阅读器	speech	屏幕阅读模式
不区分类型	all	默认值，包括以上3种情形

• 媒体特性

媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。

特性名称	属性	值
视口的宽和高	width、height	数值
视口最大宽或高	max-width、max-height	数值
视口最小宽或高	min-width、min-height	数值
屏幕方向	orientation	portrait 或 landscape

• 逻辑符

连接媒体和媒体特性的固定词语，分别为 not、only、and。

5.语法

•  /*
        这段代码的含义是：

   

        媒体类型只能为 screen
          并且视口的宽度为 640px
          body 的背景色为粉色
      */
      @media only screen and (width: 640px) {
        body {
          background-color: pink;
        }
      }
•  /*
        这段代码的含义是：
        媒体类型除了 screen
          并且视口的宽度为 640px
          body 的背景色为粉色
      */
      @media not screen and (width: 640px) {
        body {
          background-color: pink;
        }
      }
•  

检测视口的宽度和高度

 /*
      这段代码的含义是：
      当视口宽度为 640px 且 高度为 720px，body 的背景色为蓝色
    */
    @media only screen and (width: 640px) and (height: 720px) {
      body {
        background-color: blue;
      }

检测视口的最大宽度和高度

/*
      这段代码的含义是：
      当视口宽度小于等于 640px 且 高度小于等于 720px，body 的背景色为蓝色
    */
    @media only screen and (max-width: 640px) and (max-height: 720px) {
      body {
        background-color: blue;
      }
      

检测视口的最小宽度和高度

 /*
      这段代码的含义是：
      当视口宽度大于等于 640px 且 高度大于等于 720px，body 的背景色为蓝色
    */
    @media only screen and (min-width: 640px) and (min-height: 720px) {
      body {
        background-color: blue;
      }
      

检测屏幕的方向

  /*
      这段代码的含义是：
      当屏幕坚屏状态时，背景色为蓝色
    */
    @media only screen and (orientation: portrait) {
      body {
        background-color: blue;
      }

 /*
      这段代码的含义是：
      当屏幕横屏状态时，背景色为红色
    */
    @media only screen and (orientation: landscape) {
      body {
        background-color: red;
      }
      
      /* 在些还可以更多其它任意的 css */
    }
    
    /* only screen 可以被省略 */