我有一个style.css与媒体查询。在我的javascript文件中，我有一个存储在变量中的期望移动宽度的值。我可以使用javascript/jQuery更改媒体查询吗？
通过更改变量，我想自动更改媒体查询的值。是否有可能改变.css文件的内容与JavaScript一样，我可以改变DOM？ 使用JavaScript添加HTML <style> - 元素的DOM是不是我所希望的解决方案，因为我希望将所有的CSS中的.css文件
您可以通过使用$(window).width()
value=959;
if($(window).width() < value)
{
$(".classname").css("color","white");
}
是的，但由于该媒体查询中有数百个值，因此我需要在数百个CSS中进行更改JavaScript的。我能说一些像$（MEDIAQUERY）.maxWidth（variableValue）; ？ – Skalibran
你可以写使用Enquire.js jQuery插件。
它是一个JavaScript库，用于处理JavaScript中的媒体查询。
这是快速启动代码示例：
enquire.register("screen and (max-width:45em)", {
// OPTIONAL
// If supplied, triggered when a media query matches.
match : function() {},
// OPTIONAL
// If supplied, triggered when the media query transitions
// *from a matched state to an unmatched state*.
unmatch : function() {},
// OPTIONAL
// If supplied, triggered once, when the handler is registered.
setup : function() {},
// OPTIONAL, defaults to false
// If set to true, defers execution of the setup function
// until the first time the media query is matched
deferSetup : true,
// OPTIONAL
// If supplied, triggered when handler is unregistered.
// Place cleanup code here
destroy : function() {}
});
谢谢，我会记住即将到来的网站。由于我在这里的工作实际上是一个特殊的工具，我不想要任何扩展，除了jQuery。 – Skalibran
最好的办法是将有两套仅能应用于基于一个父类存在媒体查询。
@media (max-width: 600px) {
.w600 .myDiv{
color:red;
}
}
@media (max-width: 400px) {
.w400 .myDiv{
color:red;
}
}
然后，您可以添加/删除w600或w400到body类，允许所需的媒体查询工作。
使用jQuery这可能像做：
$("body").addClass("w600")
.removeClass("w400");
我很欣赏你可能已经不仅仅是一种风格更因此想以减少代码的重复。
在这种情况下，你可以使用CSS transpiler如Less与混入：
@mediaqueryruleset:{
.myDiv{
color:red;
}
.myOtherDiv{
color:blue;
}
}
@media (max-width: 600px) {
.w600 {
@mediaqueryruleset();
}
}
@media (max-width: 400px) {
.w400 {
@mediaqueryruleset();
}
}
这将输出：
@media (max-width: 600px) {
.w600 .myDiv {
color: red;
}
.w600 .myOtherDiv {
color: blue;
}
}
@media (max-width: 400px) {
.w400 .myDiv {
color: red;
}
.w400 .myOtherDiv {
color: blue;
}
}
这个答案给了我一个想法，根本不使用媒体查询，而是在必要时将.mobile类设置为一切。这工作真棒，谢谢！ – Skalibran
@Curt _“你不能动态地改变一个CSS文件中的媒体查询变量（不通过javascript再次注入整个样式表”_ _媒体查询变量可以使用'document.styleSheet'的'.media.mediaText'动态改变' .cssRules' http://plnkr.co/edit/qzLO5J4KlWZLQnjMIy7i?p=preview – guest271314
@ guest271314谢谢我不知道你可以做到这一点，但我仍然不会建议它作为一个可行的选项，但是有很多依赖按照样式表/媒体查询的顺序。 – Curt
好吧，我觉得我有适合我的解决方案。我将媒体查询外包给一个额外的style.css（例如style-mobile.css）。只有当窗口宽度是变量值时，才会加载此文件。
这个解决方案适合我，但其他人可能找不到这个问题的答案。我是否应该将这个答案标记为解决方案？
您还必须知道，某些方法可能无法在Safari中正常运行。不记得这个问题，所以你可以找到更多的信息，如果你需要它。
您可以设置直接使用.media.mediaText的document.styleSheets[0].cssRules
document.styleSheets[0].cssRules[0].media.mediaText = /* new media rule here */;
不，它不是不可能性的规则。你为什么不写不同宽度的不同媒体查询？ – steo
据我所知，不，你不能。然而，你可以做的是在目标元素上通过javascript添加或删除一个CSS类。 – asprin
您可以使用window.matchMedia（）检测JS –