使用媒体查询添加类或其他属性 [英] Add class or other attribute using media query

问题描述

我目前正在使用CSS媒体查询来定位一些小/中画面设备，例如：

I'm currently using CSS media queries to target some small/medium screen devices like this:

@media screen and (min-device-width: 480px) {
  ...
}
@media screen and (min-device-width: 720px) {
  ...
}

这样工作原理，我可以应用样式到一些特定的选择器，我想知道是否有一种方法可以基于媒体查询向选择器添加类或其他属性。

This works as expected, and I can apply styles to some particular selectors, but.. What I was wondering is if there is a way to add a class or other attribute to a selector based on media query.

我的想法示例：

@media screen and (min-device-width: 480px) {
  body { addClass('body-iphone') }
}

有办法用CSS或者JavaScript吗？

Is there a way to do that with CSS or maybe JavaScript?

推荐答案

查看 Enquire.js 。用于处理媒体查询的轻量级纯JavaScript库。看起来很酷。

Check out Enquire.js. Lightweight, pure JavaScript library for handling media queries. Looks pretty cool.

这篇关于使用媒体查询添加类或其他属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！