1

只是想知道是否有任何方法/技术可以让您用类名替换媒体查询。

例如

.header { width: 100% }
.tablet .header { width: 50%; float: left; }
.phone .header { width: 100%; max-width: 320px;}

所以 .tablet 或 .phone 被应用到 html 标签上，比如<html class="phone">

是否有一种方法/准备可以使这样的事情起作用？还是需要使用 JavaScript 来更改元素上的类？

谢谢

4

2 回答 2

0

您所描述的将需要 javascript，因为 html 需要更改才能发生

有一些工具可以帮助您对 javascript 中的媒体查询做出反应，例如令人惊叹的Enquire.js

但是，如果您正在寻找不需要 js 并且可以使用 SASS 的东西，我建议您使用CSS Wizardy 的响应式网格，它可以帮助您根据需要生成布局

我们正在使用它来构建我们自己的移动优化嵌入，我们发现它非常强大且易于使用。

希望能帮助到你

于 2013-07-27T17:26:14.060 回答
0

您可以将不同的样式表用于不同的设备。使用相同的类，没有媒体查询

<link rel="stylesheet" media="screen and (min-width: 901px)" href="css/large.css" />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
于 2013-07-27T19:25:35.413 回答