javascript - 如何在带有 javascript 条件的媒体查询中使用 css?
问题描述
我正在使用此组织结构图https://codepen.io/erinesullivan/pen/LLoXoL。基本上我想做的是在条件为真时使用媒体查询中的 css 类。有什么简单的方法吗?如果条件为真,这就是我必须使用的类的样子。
@media only screen and ( min-width: 64em ) {
ol.organizational-chart {
margin-left: -1em;
margin-right: -1em;
}
/* PRIMARY */
ol.organizational-chart > li > div {
display: inline-block;
float: none;
margin: 0 1em 1em 1em;
vertical-align: bottom;
}
ol.organizational-chart > li > div:only-of-type {
margin-bottom: 0;
width: calc((100% / 1) - 2em - 4px);
}
ol.organizational-chart > li > div:first-of-type:nth-last-of-type(2),
ol.organizational-chart > li > div:first-of-type:nth-last-of-type(2) ~ div {
width: calc((100% / 2) - 2em - 4px);
}
ol.organizational-chart > li > div:first-of-type:nth-last-of-type(3),
ol.organizational-chart > li > div:first-of-type:nth-last-of-type(3) ~ div {
width: calc((100% / 3) - 2em - 4px);
}
ol.organizational-chart > li > div:first-of-type:nth-last-of-type(4),
ol.organizational-chart > li > div:first-of-type:nth-last-of-type(4) ~ div {
width: calc((100% / 4) - 2em - 4px);
}
ol.organizational-chart > li > div:first-of-type:nth-last-of-type(5),
ol.organizational-chart > li > div:first-of-type:nth-last-of-type(5) ~ div {
width: calc((100% / 5) - 2em - 4px);
}
/* SECONDARY */
ol.organizational-chart > li > ol {
display: flex;
flex-wrap: nowrap;
}
ol.organizational-chart > li > ol:before,
ol.organizational-chart > li > ol > li:before {
height: 1em!important;
left: 50%!important;
top: 0!important;
width: 3px!important;
}
ol.organizational-chart > li > ol:after {
display: none;
}
}
谢谢你。
解决方案
此类表达式适用于此任务:
window.matchMedia("(min-width: 500px)");
检查:
const mq = window.matchMedia( "(min-width: 500px)" );
if (mq.matches) {
console.log('window width is at least 500px');
} else {
console.log('window width is less than 500px')
}
推荐阅读
- python - 如何在python中连接输入彩色图像和梯度幅度
- api - 如何从模型实例(具有来自 api 的值)传递数据并将其提供给 Text() 小部件
- azure - 如何根据用户邮件 ID 获取特定订阅中的用户角色
- python-3.x - 如何使用 pywinauto 重新定位电子应用程序
- node.js - 使用“带有 MFA 的 Azure AD-Universal”连接 Azure SQL 数据库的 NodeJs 代码
- html - 如何解决div阻止锚点工作
- java - 如果提前 1、2、3、4 分钟,如何将其舍入到最接近的 5 分钟间隔?
- javascript - 数组长度报告不一致
- django - Django:匹配的查询不存在
- firebase - Firebase Hosting 部署的网站如何找出它的版本?