Esto es un "problema" que ocurre porque estás diseñando primero para PC y luego escalas los estilos a los móviles. Entonces los estilos del escritorio se aplicarán a todas las resoluciones a no ser que los redefinas.
Tu código ahora mismo está así:
selector {
/* estilos que se aplicarán en todas las resoluciones */
}
@media (max-width: 768px) {
selector {
/* estilos que aplicarán a un máximo de 768px (móviles y tabletas) */
}
}
Debes tener en cuenta que los estilos fuera de los media queries se aplicarán siempre independientemente de la resolución de pantalla. Las media queries harán los estilos más específicos y sobreescribirán las propiedades definidas, pero si una propiedad fue definida fuera de un media query y no se redefine dentro del media query, entonces el estilo general prevalecerá. Es decir, un estilo definido dentro de un media query no remplaza al estilo general, sólo lo complementa.
Por eso tienes el problema que indicas: estás dando el color rojo en los estilos principales (que se aplicarán a todas las resoluciones). Y por eso en tu móvil se ve rojo aunque no lo hayas puesto como estilo.
Tienes varias posibilidades para solucionar el problema:
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
y height
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 (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.