CSS – Media Query

前言

Media Query 是用来做 RWD 的, 类似 JS 的 if else. 写的多有伤管理, 所以要谨慎使用哦.

 

参考:

Learn CSS Media Query In 7 Minutes

https://css-tricks.com/logic-in-css-media-queries

 

@media screen / print / all

screen 是屏幕, 手机, 平板, 电脑都算

print 是打印 ctrl + p 的情况下.

all 是两者皆是, 也是 default value @media (min-width: 100px) 相等于 @media all and (min-width: 100px)

 

@media (min-width) / (max-width) 

这里的 width 指的是 viewport 的 width.

@media (min-width: 600px) /* if (viewport.width >= 600px)*/

@media (max-width: 600px) /* if (viewport.width <= 600px)*/

 

@media (orientation)

@media (orientation: landscape)

@media (orientation: portrait)

 

And, Or Logic (&& ||)

用 and 表示同时

@media (min-width: 500px) and (max-width: 800px) /*>= 500px && <= 800px*/

用 , 逗号表示或者

@media (min-width: 500px), (max-width: 800px) /*>= 500px || <= 800px*/

 

Not (!)

表示相反匹配

@media not (min-width: 500px)

 

Overriding

media query 也是往下走的, 下面的 style 覆盖上面的. 所以下面这样写是没有意义的

@media (min-width: 500px) {
  h1 {
    color: yellow;
  }
}
h1 {
  color: red;
}

因为下面的 h1 color red 一定会覆盖上面的. 

所以一般上 media query 都是放 default style 的下面, 比如 mobile first 的写法

html { background: red; }

@media (min-width: 600px) {
  html { background: green; }
}

 

resolution

常用的是 match device pixel ratio. 比如

@media (max-width: 360px) and (min-resolution: 2dppx) {
  h1 {
    color: blue;
  }
}

360px 或一下和 device pixel ratio 2

支持度没有问题

Sass 会自动 fallback 成

@media (max-width: 360px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 360px) and (min-resolution: 2dppx) {
  h1 {
    color: blue;
  }
}

webkit-min-device-pixel-ratio 不是 standard 尽量别用.