Digamos que tengo css con los estilos.
@media screen and (min-width: 640px) { ...styles go here }Y quiero obligar a la página a adherirse a los estilos de ese punto de interrupción específico, como en, quiero que sea "el ancho siempre sea> 640px" independientemente del tamaño real de la ventana. ¿Hay alguna manera de hacerlo en html, css o mediante javascript?
No puedo modificar la hoja de estilo original, aunque puedo cargar una hoja de estilo adicional o ejecutar un código personalizado, pero preferiría no tener que copiar y pasar todos los estilos para este punto de interrupción si puedo evitarlo.
Una solución sería duplicar a través de JavaScript las reglas de consulta de medios para ese determinado CSSStyleSheet haciendo coincidir conditionText específico, algo como esto:
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));