移动端 | GongJS

媒体查询 @media

@media (max-width: 400px) { body { background: red; } }

当屏幕宽度在 0-400px 时，页面的背景色为红色。

@media (min-width: 500px) { body { background: blue; } }

当屏幕宽度在 500px 以上时，页面的背景色为蓝色。

@media (min-width: 800px) and (max-width:1000px){ body { background: green; } }

当屏幕宽度在 800-1000px 时，页面的背景色为绿色。

<link
  rel="stylesheet"
  type="text/css"
  media="screen and (max-width:960px)"
  href="style.css"
/>

页面宽度小于 960px 的执行指定的样式文件

在手机端浏览页面的时候，为了防止页面被缩放，需要加 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minmum-scale=1.0"

比如 iphone6，当页面不加viewport的时候，document.documentElement.clientWidth 的值为980，而不是 iphone6 的屏幕实际宽度375,页面的元素也被相应的缩小了980/375倍。

TIP

如果装了 emmet 插件，输入meta:vp就可以快速打出 viewport