Estoy trabajando con este organigrama https://codepen.io/erinesullivan/pen/LLoXoL . Básicamente, lo que quiero hacer es usar las clases css dentro de la consulta de medios si una condición es verdadera. ¿Alguna manera fácil de hacerlo? Así es como se ven las clases que tengo que usar si la condición es verdadera.
@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; } }Gracias.
tales expresiones son adecuadas para esta tarea:
window.matchMedia("(min-width: 500px)");para comprobar:
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') }