Redefinir el color al valor que quieras. El estilo más general indica que el color es rojo, si quieres que en móvil no ocurra esto, debes redefinir el color dentro del media query:
div { color: red; widht: 100%; height: 200px; } @media (max-width: 768px) { div { widht: 100%; height: 200px; color: black; } }
De hecho, como los estilos generales se aplican siempre, puedes simplificar más incluso tu código porque el
width
yheight
tienen el mismo valor, dejándolos así:div { color: red; widht: 100%; height: 200px; } @media (max-width: 768px) { div { color: black; } }
Cambiar a un diseño centrado en el móvil primero (mobile-first design) en el que los estilos generales serían los que se aplican a los móviles y las media queries es para redefinir los valores en resoluciones mayores (tabletas y PCs).
selector { /* estilos que se aplicarán en todas las resoluciones */ } /* min-width en lugar de max-width */ @media (min-width: 768px) { selector { /* estilos que aplican a resoluciones mayores de 768px (tabletas y PCs) */ } }
De este modo, los estilos más sencillos (los de móvil) serían los generales y los media queries serían para resoluciones de pantalla más grandes (usando
min-width
).Diseñar para PC primero o móvil primero es una elección para específica para cada proyecto. Aunque por mi experiencia, es más sencillo empezar con el móvil y luego escalar hacia arriba que hacerlo al contrario de como(como lo estás haciendo). Yo recomendaría esto... pero en tu caso podría implicar reescribir todo el CSS lo cual puede no ser factible.