A sintaxe para consultas dos medios de ancho min e ancho max
O deseño web receptivo é un achegamento á creación de páxinas web onde estas páxinas poden cambiar dinámicamente o seu deseño e aspecto en función do tamaño da pantalla dun visitante . As pantallas grandes poden recibir un deseño axeitado ás pantallas maiores mentres que os dispositivos máis pequenos, como os teléfonos móbiles, poden recibir o mesmo sitio web formatado de forma adecuada para esa pantalla máis pequena. Este enfoque proporciona unha mellor experiencia de usuario para todos os usuarios e pode incluso axudar a mellorar os rankings dos buscadores . Unha parte importante do deseño web sensible é CSS Media Queries.
As consultas de medios son como pequenas declaracións condicionais dentro do arquivo CSS do seu sitio web, o que permite establecer determinadas regras CSS que só terán que afectar cando se cumpra certa condición, como cando un tamaño de pantalla está por riba ou por baixo de determinados limiares.
Consultas de medios en acción
Entón, como usas Media Queries nun sitio web? Aquí tes un exemplo moi sinxelo:
- Comezaríase cun documento HTML ben estruturado sen ningún estilo visual (isto é para CSS)
- No teu arquivo CSS, comezarías como fas normalmente ao estilear a páxina e establecer unha base de referencia para o aspecto do sitio web. Digamos que quería que o tamaño da fonte da páxina fose de 16 píxeles, podería escribir este CSS: body {font-size: 16px; }
- Agora, pode querer aumentar ese tamaño de letra para pantallas maiores que teñan amplo inmoble para facelo. Aquí é onde comezan as consultas de medios. Comezaríase unha consulta de medios como esta: a pantalla @media e (min-width: 1000px) {}
- Esta é a sintaxe dunha consulta de medios. Comeza con @media para establecer a propia Consulta de medios. A continuación configure o "tipo de soporte", que neste caso é "pantalla". Isto aplícase a pantallas de computadoras de escritorio, comprimidos, teléfonos, etc. Finalmente, finaliza Media Query coa "función multimedia". No noso exemplo anterior, que é "mid-width: 1000px". Isto significa que Media Query iniciará as pantallas cun ancho mínimo de 1000 píxeles de ancho.
- Despois destes elementos da Media Query, engádeselle unha apertura e pechadura de guillotina similar ao que faría en calquera norma CSS normal.
- O paso final para unha consulta de medios é engadir as regras CSS que quere aplicar unha vez que se cumpre esta condición. Engades estas regras CSS entre os aparellos que forman a Consulta de medios, así: @media screen e (min-width: 1000px) {body {font-size: 20px; }
- Cando se cumpren as condicións de Media Query (a xanela do navegador ten polo menos 1000 píxeles de ancho), este estilo CSS terá efecto, modificando o tamaño da fonte do sitio desde os 16 píxeles que establecemos orixinalmente ata o noso novo valor de 20 píxeles.
Engadir máis estilos
Pode colocar tantas regras CSS dentro desta Media Query como sexa necesario para axustar a aparencia visual do seu sitio web. Por exemplo, se quería non só aumentar o tamaño da letra a 20 píxeles, senón tamén cambiar a cor de todos os parágrafos en negro (# 000000), podes engadir isto:
Pantalla @media e (min-width: 1000px) {body {font-size: 20px; } p {cor: # 000000; }}Engadindo máis consultas de medios
Ademais, pode engadir máis Consultas multimedia para cada tamaño maior, engadíndoos á súa folla de estilo como esta:
Pantalla @media e (min-width: 1000px) {body {font-size: 20px; } p {cor: # 000000; {} @media e (min-width: 1400px) {body {font-size: 24px; }}As primeiras Consultas multimedia enviarían a 1000 píxeles de ancho, cambiando o tamaño da letra a 20 píxeles. Logo, unha vez que o navegador estaba por riba de 1.400 píxeles, o tamaño da fonte cambiaría de novo a 24 píxeles. Podería engadir tantas Consultas multimedia como fose necesario para o seu sitio web en particular.
Ancho mínimo e ancho máximo
Xeralmente hai dúas formas de escribir consultas multimedia: usando "min-width" ou con "max-width". Ata agora, vimos "min-width" en acción. Isto fai que as consultas de medios teñan efecto cando un navegador alcance polo menos ese ancho mínimo. Polo tanto, unha consulta que usa "min-width: 1000px" aplicarase cando o navegador ten polo menos 1000 pixels de ancho. Este estilo de Media Query emprégase cando se está a construír un sitio de forma "móbil".
Se usa "max-width", funciona do contrario. Unha consulta de medios de "max-width: 1000px" aplicábase unha vez que o navegador caese por baixo deste tamaño.
En canto aos navegadores máis antigos
Un desafío con Media Queries é a súa falta de soporte en versións anteriores en Internet Explorer. Afortunadamente, hai dispoñibles versións dispoñibles para o parche que admiten consultas multimedia nos navegadores máis antigos, o que lles permite empregar en sitios web de hoxe e que aínda non está roto na visualización do sitio web.
Editado por Jeremy Girard o 24/01/17