Question

我有两个名为class1和class2的课程。我还有一个id="responsive_element"的元素。我想要的是在屏幕尺寸低于768px时将class1分配给此元素，否则为class2。

我可以在Less like中执行此操作：

@media screen and (max-width:768px){
  #responsive_element{
    .class1()
  }
}

@media screen and (min-width:769px){
  #responsive_element{
    .class2()
  }
}

是否有任何“仅限CSS”方式来实现这一目标？

编辑：我想我无法清楚地解释我的问题。我已经能够通过编译less来实现这一点，但是css文件的大小会因为长类定义而增长并且使用它们太多。我想通过简单地改变元素的类来处理它。

Answer 1

除.class1()和.class2()调用外，您的Less代码已经是CSS。具体而言，基于屏幕大小应用样式的@media查询不具体。因此，例如，以下是纯CSS：

@media screen and (max-width:768px){
  #responsive_element{
    color: blue;
  }
}

@media screen and (min-width:769px){
  #responsive_element{
    color: red;
  }
}

如果您想将Less转换为CSS，您需要做的就是将.class1和.class2的CSS代码复制到.class1()和{{1}的位置调用。事实上，由于Less是作为CSS的转换器实现的，您可以使用LESS2CSS处的在线转换器为您进行转换。

如果您要问普通的CSS是否有办法编写这些查询，以便他们使用现有的.class2()和.class1样式定义而无需复制，那么我相信答案是否定的。 Less被发明的主要原因是因为CSS不支持这种样式信息的重用。

Answer 2

如果你的意思是，是否有办法单独使用CSS来改变元素的类以响应不断变化的屏幕大小（字面意思是，为元素的HTML“class”属性添加或删除新的类名，因此不同类的CSS将会对该元素生效），那么答案就是“不，你不能单独使用CSS”。

（少了也不能这样做。你的原始Less代码不会改变元素的class属性，你可以通过查看生成的CSS清楚地看到它。它只是使用类作为一个方便的技巧来命名部分可共享的CSS。）

以您想要的方式更改元素类的唯一方法是对DOM进行更改，显然您可以通过JavaScript进行更改，但不能仅使用CSS。

使用css在不同的屏幕尺寸上分配不同的类

2 个答案: