我有一个带有媒体查询的 style.css 。在我的 javascript 文件中，我将所需的移动宽度值存储在变量中。
通过更改变量，我想自动更改媒体查询的值。是否可以像更改 DOM 一样使用 javascript 更改 .css 文件的内容？
添加 HTML<style>使用 javascript 将 -element 添加到 DOM 不是我想要的解决方案，因为我想将所有 css 保留在 .css 文件中
最好的选择是拥有两组媒体查询，仅根据存在的父类应用它们。
@media (max-width: 600px) {
.w600 .myDiv{
color:red;
}
}
@media (max-width: 400px) {
.w400 .myDiv{
color:red;
}
}
然后您可以添加/删除w600 or w400 to the body类以允许所需的媒体查询工作。
使用 jQuery 可以这样做：
$("body").addClass("w600")
.removeClass("w400");
我很高兴您可能拥有不止一种风格，因此希望减少代码重复。
在这种情况下，您可以使用 CSS 转译器，例如Less http://lesscss.org/与混合：
@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;
}
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
