I have several custom-media query definitions set up, things like:
@custom-media --mobile (width < 535px);
@custom-media --tablet (801px <= width < 1025px);
@custom-media --desktop (width >= 1025px);
...
In which I use like:
@media (--mobile) {
// Some mobile styles here
}
I know that we can perform a combination of media queries with the and
join like:
@media (min-width: 30em) and (orientation: landscape) { ...
Is there any way in which I can define a media query that utilises 2 of my custom-media variables, to have a certain style like:
@media (--mobile) and (--desktop) {
// Styles that only apply at mobile and desktop sizes
}