diseño web adaptable - preguntas de los medios
Medios de comunicación (medios de comunicación) han introducido una consulta en CSS3: consultas @media CSS3 .
Utilice @media consultas, se pueden definir diferentes estilos para diferentes tipos de medios.
Ejemplos
Si la ventana del navegador es más pequeña que 500 píxeles, el fondo cambiará a azul claro:
body {
background-color: lightblue;
}
}
Trate »
Añadir un punto de interrupción
En el tutorial anterior usamos las filas y columnas para crear páginas web, que es sensible, pero en la pantalla pequeña y no muestran amigable.
Las consultas de medios pueden ayudar a resolver este problema. Podemos añadir un punto de interrupción en el medio del proyecto de diseño, diferentes puntos de corte tienen diferentes efectos.
escritorio
Los dispositivos móviles
Utilice preguntas de los medios 768px añadir puntos de ruptura:
Ejemplos
Cuando la pantalla (la ventana del navegador) es de menos de 768px, la anchura de cada columna es 100%:
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Trate »
Prioridad para el diseño de la terminal móvil
Prioridad significa escritorios extremo móvil y otros dispositivos diseñados para dar prioridad al diseño de la terminal móvil.
Esto significa que tenemos que hacer algunos cambios en el CSS.
Examinamos menos de 768px en cambios de estilo necesita ser modificado en el mismo estilo cuando la pantalla es más ancha que 768px. Los siguientes son ejemplos de prioridad móviles de gama:
[* Clase = "colaboración"] {
width: 100%;
}
@media única pantalla y (min-width : 768px) {
/ * Para escritorio: * /
.col-1 {width: 8,33% ;}
.col-2 {width: 16,66% ;}
.col-3 {width: 25% ;}
.col-4 {width: 33,33% ;}
.col-5 {width: 41,66% ;}
.col-6 {width: 50% ;}
.col-7 {width: 58.33% ;}
.col-8 {width: 66,66% ;}
.col-9 {width: 75% ;}
.col-10 {width: 83,33% ;}
.col-11 {width: 91.66% ;}
.col-12 {width: 100% ;}
}
otros puntos de ruptura
Puede añadir un punto de interrupción en función de sus necesidades.
También podemos dispositivos de tableta y teléfono móvil establecer puntos de interrupción.
escritorio
tableta
Los dispositivos móviles
600px pantalla al agregar preguntas de los medios, y establecer el nuevo estilo (pero menor que la pantalla es más grande que 600px 768px):
Ejemplos
Tenga en cuenta que dos estilos de clase son los mismos, pero con diferentes nombres (colaboración y col-m-):
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 { width: 8.33%; }
.col-m-2 { width: 16.66%; }
.col-m-3 { width: 25%; }
.col-m-4 { width: 33.33%; }
.col-m-5 { width: 41.66%; }
.col-m-6 { width: 50%; }
.col-m-7 { width: 58.33%; }
.col-m-8 { width: 66.66%; }
.col-m-9 { width: 75%; }
.col-m-10 { width: 83.33%; }
.col-m-11 { width: 91.66%; }
.col-m-12 { width: 100%; }
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }
}
Trate »
El código anterior se ve más que un montón, pero se puede ajustar automáticamente según el tamaño de la pantalla de diferentes estilos, por lo que todavía es muy necesario.
Ejemplos HTML
Por escritorio:
La primera y tercera sección que abarca tres. La porción intermedia entre dominios 6.
Para los dispositivos de tableta:
La primera cruzada dominio 3, la segunda sección abarca 9, la tercera parte de un multidominio 12:
<Div class = "col-3 col-m-3"> ... </ div>
<Div class = "col-6 col-m-9"> ... </ div>
<Div class = "col-3 col-m-12"> ... </ div>
</ Div>
Dirección: horizontal de la pantalla / pantalla vertical,
En combinación con las consultas de medios CSS, puede crear adaptarse a diferentes orientación del dispositivo (paisaje paisaje, retrato retrato, etc.) diseño.
sintaxis:
orientation：portrait | landscape
- retrato: especificar el dispositivo de salida en la región visible de la altura de la página es mayor que o igual a la anchura
- paisaje: el valor de las circunstancias retrato Inter es el paisaje
Ejemplos
Si el fondo de la pantalla vertical será de color azul claro:
body {
background-color: azul claro;
}
}
Trate »