移动端布局-响应式布局

• 响应式布局：一个网站兼容多种终端，对不同尺寸的屏幕做出响应（媒体查询），并进行相应的布局
• 媒体查询（Media querys）：简称媒询，针对不同大小的屏幕写样式

  @media 媒体查询生效条件{
      生效后执行的css代码;
  }
  
  /* 屏幕设备(用于电脑屏幕，平板电脑，智能手机等), 并且最小宽度320px, 低于320, 不生效 */
  /* min-width 意味着生效条件是 width >= 320px */
  /* 320px 是断点, 发生改变的那个点, breakpoint */
  @media screen and (min-width: 320px) {
      body {
          background-color: olivedrab;
      }
  }

• 媒体类型：即上述代码中screen位置的值（all和screen比较常用）

　　　　1.all（所有设备，默认值）

　　　　2.screen（屏幕设备）

　　　　3.print（打印设备）

　　　　4.speech（屏幕阅读器，一般供残障人士使用）

• 媒体查询中的逻辑：与（and），或（，），非（not）

　　　　与（and）：查询条件全部为真时生效

　　　　或（，）：查询条件中的任意一个为真时即生效，可以把查询条件分开

　　　　非（not）：对当前查询条件取反。当not与and同时出现时，not对整个媒体查询都有效；当not与或（，）分隔的多个媒体查询同时存在时，not只对他所在的那个查询生效。

• 媒体特性：上述代码中min-width位置的值

　　宽度：width / min-width / max-width（width代表只有完全等于这个宽度时才生效，不推荐使用且有bug）

　　像素比dpr：-webkit-device-pixel-ratio / -webkit-min-device-pixel-ratio / -webkit-max-pixel-ratio （加上-webkit-是因为只有支持webkit内核的浏览器才生效）

/* dpr 等于 2 时生效 */
@media screen and (-webkit-device-pixel-ratio: 2) {
    body {
        background-color: olivedrab;
    }
}

/* dpr >= 2 时生效 */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    body {
        background-color: olivedrab;
    }
}

/* dpr <= 2 时生效 */
@media screen and (-webkit-max-device-pixel-ratio: 2) {
    body {
        background-color: olivedrab;
    }
}

/* js获取dpr的方法*/
console.log(window.devicePixelRatio);

 

　　　　屏幕方向orientation：landscspe（横屏）/ portrait（竖屏）

/* 横屏时生效 */
@media screen and (orientation: landscape) {
    body {
        background-color: olivedrab;
    }
}

/* 竖屏时生效 */
@media screen and (orientation: portrait) {
    body {
        background-color: olivedrab;
    }
}

 

• 断点的设置

　　　　1.bootstrap的断点：

2.改变屏幕大小，当前页面显示不正常（或不符合要求）的时候，就需要设置断点

• 媒体查询的书写位置（无论媒体查询条件是否满足，都会下载样式文件）

1.样式表（style标签或单独的CSS文件中）（推荐）

2.样式外链link中（不推荐）

•  媒体查询的策略

1.无策略（直接按照bootstrap断点写）

2.PC端优先，从大到小写

3.移动端优先，从小到大写