css - jQuery 移动 CSS

Question

我希望能够将 jquery 移动 CSS 换成桌面“友好”的 CSS。例如，当用户不在移动设备上时，以非移动类型样式显示样式。是否有平台或现有的 CSS 可以做到这一点？

score 2 · Accepted Answer

只需将移动版本的 css 更改为在桌面上看起来不错。

CSS3 媒体查询

一些例子：

最大宽度- 如果查看区域小于 600 像素。

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

最小宽度- 如果查看区域大于 900 像素，将应用以下 CSS。

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

多个媒体查询- 组合多个媒体查询。如果查看区域介于 600 像素和 900 像素之间，则将应用以下代码。

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}

设备宽度 如果最大设备宽度为 480 像素（例如 iPhone 显示器），则代码将适用

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}

链接到单独的样式表：

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

1 回答 1