用css对不同的屏幕尺寸指定不同的类

让我有2个类名为class1和class2。我也有一个元素id="responsive_element"。我想要的是当屏幕尺寸低于768px时将class1分配给此元素，否则将class2分配给此元素。用css对不同的屏幕尺寸指定不同的类

我能做到这一点不象：

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

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

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

编辑：我想我无法清楚地解释我的问题。我已经可以通过少编译来做到这一点，但是对于长类定义并且使用它们太多，css文件的大小会增加。我想通过简单地改变元素的类来处理它。

来源

2016-11-25 Bünyamin Sarıgül

我想你是以错误的方式接近这个问题。您不会根据屏幕大小分配课程。您分配类，然后根据屏幕大小定义每个类的功能。 –

@JordiNebot不，我有两个类已经定义和使用的一些其他元素，也没有任何关系的屏幕尺寸。像'.class1 {color：red;} .class2 {color：blue;}'一样。但我希望我的元素在大屏幕上使用其中一个，而在较小的屏幕上使用其他元素。我想要这样做，而不是一次又一次地写同样的东西。 –

请注意，在生产中使用Less的预期方法是将较少的样式表转换为CSS。所以，当你说你想这样做时，“不要一次又一次地写同样的东西”，这就是*为*的“少”。你把它写成Less，以至于作为程序员，即使在最终的生产CSS中，由于CSS固有的局限性，它们也必须一次又一次地重复写入，所以不必一次又一次地写同样的东西。 –

除了.class1()和.class2()调用，您的较少的代码已经是CSS。具体来说，应用基于屏幕大小的样式的@media查询并非特定于较低的。因此，举例来说，下面是纯CSS：

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

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

如果你想你的少转换成CSS，所有你需要做的是从.class1和.class2的CSS代码复制到.class1()和.class2()的地方调用。实际上，由于Less是作为CSS转换器实现的，因此您可以使用在线转换器LESS2CSS为您进行转换。

如果您问是否有纯CSS的方式来编写这些查询，以便他们使用现有的.class1和.class2样式定义而不进行复制，那么我相信答案是否定的。少发明的主要原因是因为CSS不支持这种样式信息的重用。

来源

2016-11-25 08:53:44

如果你的意思是，有没有一种方法可以单独使用CSS来改变元素的类以响应更改屏幕大小（从字面上看，向元素的HTML“class”属性添加或删除新的类名，以便CSS适用于不同的类将在那个元素上生效），那么答案就是“不，你不能单独使用CSS来完成”。你可以通过查看生成的CSS来清楚地看到元素的类属性，它只是使用类作为一个方便的技巧来命名部分可共享的CSS）

以您似乎想要的方式更改元素类的唯一方法是对DOM进行更改，您可以通过JavaScript显然执行此操作，但不能单独使用CSS。

来源

2016-11-26 00:30:35

用css对不同的屏幕尺寸指定不同的类

回答

相关问题