Repasamos algunos conceptos necesarios para hacer nuestro sitio responsivo. La @mediaregla se usa en consultas de medios para aplicar diferentes estilos de medios/dispositivos desde el Desktop al Mobile.
Las consultas de medios se pueden usar para verificar muchas cosas, como:
- ancho y alto de la ventana gráfica
- ancho y alto del dispositivo
- orientación (la tableta/teléfono está en modo horizontal o vertical????)
- resolución
El uso de consultas de medios es una técnica popular para entregar una hoja de estilo personalizada (diseño web receptivo) a computadoras de escritorio, portátiles, tabletas y teléfonos móviles.
También puede usar consultas de medios para especificar que ciertos estilos son solo para documentos impresos o para lectores de pantalla (tipo de medio: impreso, pantalla o voz).
Además de los tipos de medios, también hay funciones de medios. Las funciones de medios brindan detalles más específicos para las consultas de medios, al permitir probar una función específica del agente de usuario o dispositivo de visualización. Por ejemplo, puede aplicar estilos solo a aquellas pantallas que son más grandes o más pequeñas que un cierto ancho.
ejemplo para CSS
/* En pantallas de 992px de ancho o menos, pase de cuatro columnas a dos columnas */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* En pantallas de 600 px de ancho o menos, haga que las columnas se apilen una encima de la otra en lugar de una al lado de la otra*/
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
El resto de la clase lo utilizamos para editar nuestro código. A continuación algunas consideraciones para continuar con el responsive:
Todo lo que edite en las propiedades de mi CSS en su versión principal afectará el desarrollo de los @media,. En este caso sería la versión Desktop que afectará el desarrollo de las versiones Mobile. Ej:
- Si al editar el HEADER con un acho en pixeles PX; y no en porcentaje %; y le coloco padding lateral en PX; cuando valla a los @media el diseño comenzara a afectarse y por consecuencia los elementos se empezaran a mover y quedar descentrados.
- La idea es que defina los atributos para HEADER con valores porcentuales y alineados con otros atributos como Align-content para asegurar que al mover mi sitio no se distorsionen los espacios.
Considerar la forma de trabajo – Desktop o Mobile – y concentrarme en cumplir con esa exigencia y observar la sintaxis que construí al principio de mi html junto con el CSS para ahorrar tiempo y evitar problemas de compatibilidad.
Colocar e identificar muy bien cuando los elementos sean CLASS o ID usando nombres claros y específicos NO genéricos y evitando repetir nombres.
Utilizar el inspector de elementos para escribir y probar modificaciones; hay muchas etiquetas y atributos que estaban demás en mi sitio, hay que examinar qué hace cada etiqueta y estilo en CSS, una letra mal escrita o elementos que sobran provocan alteraciones que son difíciles de identificar si no hay una estructura bien definida.
https://www.silocreativo.com/consejos-escribir-mejor-css/
