移动进阶之高效开发

移动进阶之高效开发

媒体查询

一套样式很难适应各种大小的屏幕
针对各种大小的屏幕写样式，让我们的页面在不同大小的屏幕上都能正常显示

媒体类型

all（所有设备 默认值） / screen（屏幕设备） / print（打印设备） / speech（屏幕阅读器，一般供残障人士使用）
all 和 screen 比较常用

@media screen and (min-width: 320px) {
    body {
      background-color: red;
    }
}

媒体查询中的逻辑

与( and ) / 或( , ) / 非( not )

与( and ) 查询条件全部为真时生效

//screen 并且屏幕宽度 >=320px 且 <= 375px
@media screen and (min-width: 320px) and (max-width: 375px) {
    body {
      background-color: red;
    }
}

或( , ) 查询条件中的任意一个为真时生效

//(screen 并且屏幕宽度 >= 375px) 或 (屏幕宽度 <= 320px)
@media screen and (min-width: 375px), (max-width: 320px) {
    body {
      background-color: red;
    }
}
//(screen 并且屏幕宽度 >=375px) 或 (all 并且屏幕宽度 <= 320px)
@media screen and (min-width: 375px), all and (max-width: 320px) {
    body {
      background-color: red;
    }
}

非( not ) 对当前查询条件取反

//当 not 与 and 同时出现，not 对整个媒体查询生效
//取反(screen 并且屏幕宽度 >=320px 且 <= 375px) 
@media not screen and (min-width: 320px) and (max-width: 375px) {
    body {
      background-color: red;
    }
}

//not 与逗号分隔的多个媒体查询同时存在时，not 只对它所在的那个查询生效
@media not screen and (min-width: 375px), all and (max-width: 320px) {
    body {
      background-color: red;
    }
}

媒体特性

width / max-width / min-width

-webkit-device-pixel-ratio / -webkit-max-device-pixel-ratio / -webkit-min-pixel-ratio

orientation: landscape / portrait

//dpr <= 2 且屏幕水平方向
@media (-webkit-max-device-pixel-ratio: 2) and (orientation: landscape) {
    body {
      background-color: red;
    }
}

断点

经验总结

Bootstrap 的断点

• xs: < 576px 超小屏
• sm: 576px ~ 768px 小屏
• md: 768px ~ 992px 中屏
• lg: 992px ~ 1200px 大屏
• xl: >= 1200px 超大屏

媒体查询的书写位置

• 样式表（style 标签或单独的 CSS 文件）中（推荐）
• 样式外链 link 中（不推荐）

  <link rel="stylesheet" href="./css/mobile.css" media="screen and (max-width: 768px)"/>