CSS3 Consultas media

Las consultas media CSS le permiten formatear el documento para que se muestre correctamente en dispositivos de salida de diferentes tamaños.

Consultas media y diseño web responsivo

Las consultas media le permiten personalizar la visualización del sitio web para un rango específico de dispositivos (por ejemplo, teléfonos móviles, tabletas, computadoras de escritorio, etc.) sin cambiar la marca. Las consultas media consisten en tipos de medios y cero o más expresiones que coinciden con condiciones específicas de medios (por ejemplo, ancho del dispositivo o resolución de pantalla).

Las consultas media son expresiones lógicas, por lo que se pueden interpretar como verdadero o falso. Si el tipo de medio especificado en la consulta media coincide con el tipo de dispositivo que está mostrando el documento y se satisfacen todas las expresiones de la consulta media, el resultado de la consulta es verdadero. Cuando la consulta media es verdadera, las hojas de estilo o las reglas de estilo relacionados se aplican al dispositivo objetivo. Este es un ejemplo simple de consulta media de dispositivo estándar.

/*　Smartphones (apaisado y en vertical)　----------　*/
@media　screen　and　(min-ancho:　320px) y (max-ancho:　480px){
　　　　/*　styles　*/
}
/*　Smartphones (en vertical)　----------　*/
@media　screen　and　(max-ancho:　320px){
　　　　/*　styles　*/
}
/*　Smartphones (apaisado)　----------　*/
@media　screen　and　(min-ancho:　321px){
　　　　/*　styles　*/
}
/*　Tabletas, iPad (apaisado y en vertical)　----------　*/
@media　screen　and　(min-ancho:　768px)　and　(max-ancho:　1024px){
　　　　/*　styles　*/
}
/*　Tabletas, iPad (en vertical)　----------　*/
@media　screen　and　(min-ancho:　768px){
　　　　/*　styles　*/
}
/*　Tabletas, iPad (apaisado)　----------　*/
@media　screen　and　(min-ancho:　1024px){
　　　　/*　styles　*/
}
/*　Escritorios y laptops　----------　*/
@media　screen　and　(min-ancho:　1224px){
　　　　/*　styles　*/
}
/*　Pantallas grandes　----------　*/
@media　screen　and　(min-ancho:　1824px){
　　　　/*　styles　*/
}

Cambiar el ancho de la columna según el tamaño de la pantalla

Puede usar consultas CSS media para cambiar el ancho de la página web y los elementos relacionados, proporcionando la mejor experiencia de visualización para los usuarios en diferentes dispositivos.

Las siguientes reglas de estilo cambiarán automáticamente el ancho del elemento contenedor según el tamaño de la pantalla o la vista de portada. Por ejemplo, si el ancho de la vista de portada es menor que768píxeles, cubrirá el ancho de la vista100%, si es mayor que768píxeles pero menor que1024píxeles, entonces será75píxeles, y así sucesivamente.

.container　{
　　　　margen: 0 auto;
　　　　fondo: #f2f2f2;
　　　　caja-ajuste: 　borde-caja;
}
/*　Teléfonos móviles (retroceso y paisaje)　----------　*/
@media　screen　and　(max-ancho:　767px){
　　　　.container　{
　　　　　　　　ancho:　100%;
　　　　　　　　relleno: 0　10px;
　　　　}
}
/*　Tabletas y iPad (retroceso y paisaje)　----------　*/
@media　screen　and　(min-ancho:　768px)　and　(max-ancho:　1023px){
　　　　.container　{
　　　　　　　　ancho:　750px;
　　　　　　　　relleno: 0　10px;
　　　　}
}
/*　Escritorios y portátiles de baja resolución　----------　*/
@media　screen　and　(min-ancho:　1024px)　{
　　　　.container　{
　　　　　　　　ancho:　980px;
　　　　　　　　relleno: 0　15px;
　　　　}
}
/*　Escritorios y portátiles de alta resolución　----------　*/
@media　screen　and　(min-ancho:　1280px)　{
　　　　.container　{
　　　　　　　　ancho:　1200px;
　　　　　　　　relleno: 0　20px;
　　　　}
}

Cambiar el diseño según el tamaño de la pantalla

También puede usar consultas de medios CSS para que su diseño de sitio web multicolumna sea más adaptable y solo necesite poco personalización para responder a dispositivos.

Si el tamaño de la vista de portada es mayor o igual que768píxeles, se creará un diseño de dos columnas con las siguientes reglas de estilo, pero si es menor o igual que768píxeles, que se presentará como diseño de columna.

.column　{
　　　　ancho:　48%;
　　　　relleno: 0　15px;
　　　　caja-ajuste: 　borde-caja;
　　　　fondo: 　#93dcff;
　　　　flotar: izquierda;
}
.container　.column:first-child{
　　　　margen-derecha:　4%;
}
@media　screen　and　(max-ancho:　767px){
　　　　.column　{
　　　　　　　　ancho:　100%;
　　　　　　　　relleno:　5px　20px;
　　　　　　　　flotar: ninguno;
　　　　}
　　　　.container　.column:first-child{
　　　　　　　　margen-derecha: 0;
　　　　　　　　margen-abajo:　20px;
　　　　}
}