前言

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)