有没有办法在媒体查询条件下存储数据?
Is there any way to store data in a media query condition?
我有一个情况需要排除媒体查询,除非它们匹配一个或多个特定元素。
有什么方法可以在媒体查询中指定将被查询忽略但可检索的数据吗?
var rules = document.styleSheets[0]["cssRules"] || document.styleSheets[0]["rules"];
var numberOfRules = rules!=null ? rules.length : 0;
// loop through rules and hide media queries except selected
for (var i=0;i<numberOfRules;i++) {
var rule = rules[i];
if (rule.media!=null) {
console.log(rule.conditionText);
}
}
@media (min-width: 500px) {
.hideOnMobile {
display: none !important;
}
}
我想做这样的事情:
@media (min-width: 500px) or (device: myElementName) {
.hideOnMobile {
display: none !important;
}
}
我查看了属性页面,但它看起来没有任何可用的东西。
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
媒体查询语法在此 link 中进行了描述:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media#formal_syntax
“用一个横线 | 分隔两个或多个实体意味着所有实体都是独占选项:这些选项中的一个必须存在。这通常用于分隔可能的关键字列表。”
您可以使用 window.matchMedia() 函数来确定文档是否与 JavaScript 中的媒体查询字符串匹配,或者您可以直接使用 .media.mediaText[=11= 设置规则]
如果您需要一组用于媒体查询开发人员的标识符,请在媒体查询的语法中指定标识字段:developer.mozilla.org/en-US/docs/Web/CSS/ident
我不知道如何通过查看媒体查询 'line' 来做到这一点,而不会潜在地扰乱某些验证器,因为 afaik,例如,你不能在那里随意使用 css 变量妮莉.
但是您可以在媒体查询的设置中使用 CSS 变量。看起来有点老套,但它确实有效。此代码段在媒体查询的设置中查找 'oneofmine' 字符串,如果它不存在(目前),则告诉您摆脱此规则。 [不知道你会用什么方法去掉这个规则]
var rules = document.styleSheets[0]["cssRules"] || document.styleSheets[0]["rules"];
var numberOfRules = rules != null ? rules.length : 0;
// loop through rules and hide media queries except selected
for (var i = 0; i < numberOfRules; i++) {
var rule = rules[i];
if ((rule.media != null) && (rule.cssText.match('oneofmine')) == null) {
//hide this rule
console.log('You should hide this rule: ' + rule.cssText);
}
}
body {
width: 100vw;
height: 100vh;
background: yellow;
}
@media (min-width: 1024px) {
body {
--oneofmine: 1;
background: blue;
}
}
@media (min-width: 1024px) {
body {
background: red !important;
}
}
我有一个情况需要排除媒体查询,除非它们匹配一个或多个特定元素。
有什么方法可以在媒体查询中指定将被查询忽略但可检索的数据吗?
var rules = document.styleSheets[0]["cssRules"] || document.styleSheets[0]["rules"];
var numberOfRules = rules!=null ? rules.length : 0;
// loop through rules and hide media queries except selected
for (var i=0;i<numberOfRules;i++) {
var rule = rules[i];
if (rule.media!=null) {
console.log(rule.conditionText);
}
}
@media (min-width: 500px) {
.hideOnMobile {
display: none !important;
}
}
我想做这样的事情:
@media (min-width: 500px) or (device: myElementName) {
.hideOnMobile {
display: none !important;
}
}
我查看了属性页面,但它看起来没有任何可用的东西。
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
媒体查询语法在此 link 中进行了描述: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#formal_syntax
“用一个横线 | 分隔两个或多个实体意味着所有实体都是独占选项:这些选项中的一个必须存在。这通常用于分隔可能的关键字列表。”
您可以使用 window.matchMedia() 函数来确定文档是否与 JavaScript 中的媒体查询字符串匹配,或者您可以直接使用 .media.mediaText[=11= 设置规则]
如果您需要一组用于媒体查询开发人员的标识符,请在媒体查询的语法中指定标识字段:developer.mozilla.org/en-US/docs/Web/CSS/ident
我不知道如何通过查看媒体查询 'line' 来做到这一点,而不会潜在地扰乱某些验证器,因为 afaik,例如,你不能在那里随意使用 css 变量妮莉.
但是您可以在媒体查询的设置中使用 CSS 变量。看起来有点老套,但它确实有效。此代码段在媒体查询的设置中查找 'oneofmine' 字符串,如果它不存在(目前),则告诉您摆脱此规则。 [不知道你会用什么方法去掉这个规则]
var rules = document.styleSheets[0]["cssRules"] || document.styleSheets[0]["rules"];
var numberOfRules = rules != null ? rules.length : 0;
// loop through rules and hide media queries except selected
for (var i = 0; i < numberOfRules; i++) {
var rule = rules[i];
if ((rule.media != null) && (rule.cssText.match('oneofmine')) == null) {
//hide this rule
console.log('You should hide this rule: ' + rule.cssText);
}
}
body {
width: 100vw;
height: 100vh;
background: yellow;
}
@media (min-width: 1024px) {
body {
--oneofmine: 1;
background: blue;
}
}
@media (min-width: 1024px) {
body {
background: red !important;
}
}