Lets say I have css with the styles
@media screen and (min-width: 640px) {
...styles go here
}
And I want to force the page to adhere to that specific breakpoint's styles, as in, I want to make it so "the width is always > 640px" regardless of the actual window size. Is there a way to do that in the html, css, or via javascript?
I can't alter the original stylesheet, although I can load in an additional stylesheet or run custom code, but I'd rather not have to essentially copy and past all the styles for this breakpoint if I can avoid that
A solution would be to duplicate through JavaScript the media query rules for that certain CSSStyleSheet by matching specific conditionText, something like this:
const styles = [];
for (const CSSStyleSheet of document.styleSheets)
for (const rule of CSSStyleSheet.cssRules)
if (rule instanceof CSSMediaRule &&
rule.conditionText === 'screen and (min-width: 640px)') {
for (const r of rule.cssRules)
styles.push([CSSStyleSheet, r.cssText]);
}
styles.forEach(([style, rule]) => style.insertRule(rule));