¡Llámanos hoy!

Blog

preguntas de los medios

Diseño adaptable 103: consultas de medios CSS y herramientas de Google Chrome

Ahora que tienes un buen manejo diseño web adaptable y El marco Bootstrap de Twitter, es hora de sumergirse en las dos últimas herramientas más importantes que necesitará para crear sitios web receptivos: consultas de medios CSS y herramientas para desarrolladores de Google Chrome.

Consultas CSS @media

PROPÓSITO: decirle manualmente al navegador que muestre diferentes cosas en pantallas de diferentes tamaños.

CÓMO HACERLO: Media queries es lo más cercano a la “programación” real mientras codifica en CSS. La mayor parte de CSS se trata simplemente de decirle al navegador cómo mostrar ciertos elementos. Las consultas de @media, por otro lado, en realidad le dicen al navegador que controlar en algo (en este caso, el tamaño de la ventana del navegador o el tipo de dispositivo que se está utilizando), y luego mostrar diferentes cosas dependiendo de los resultados de esa verificación. Es casi como una declaración "si, entonces" para CSS. Por ejemplo:

es esencialmente equivalente a decirle al navegador:

@media = O navegador, comprueba el tamaño de la pantalla por mí..

pantalla = si este sitio web se muestra en una pantalla,

y (ancho mínimo: 480px) = y la ventana tiene al menos 480 píxeles de ancho,

{…} = Entonces, querido navegador, ejecute el código contenido dentro de estas llaves (en este caso, haga que la barra lateral #leftsidebar flote a la izquierda, con un ancho de 200px, y permita que la sección #main tenga un margen izquierdo de 216 píxeles) De lo contrario, si esto no se muestra en una pantalla, o si la ventana del navegador es menor de 480px, utilice la configuración predeterminada para #leftsidebar y #main, que se definen en algún lugar fuera de estas llaves.

  1. haga clic aquí para leer más sobre consultas de medios.
  2. haga clic aquí para obtener un ejemplo simple de consultas de medios en el trabajo. Cambie el tamaño de la ventana del navegador y verá que el color de fondo es azul claro por defecto, pero cambia a verde claro cuando la ventana tiene más de 480 píxeles de ancho.
  3. Usando el recurso anterior, vea si puede agregar algunas líneas de código CSS para hacer

    El encabezado cambia de tamaño según el tamaño de la ventana del navegador. Si no puede resolverlo, consulte el fragmento de código al final de esta página. El código agregado está en negrita.

  4. Aquí es otro ejemplo de la misma serie, que utiliza consultas de medios para crear una página web receptiva. Tenga en cuenta que en este caso, las consultas de medios se utilizan para realizar una función similar a Twitter Bootstrap. De hecho, gran parte de la biblioteca de códigos de Bootstrap utiliza consultas de medios para sus características de diseño receptivo.
  5. Por último, es posible que desee comprobar qué developers.google.com tutorial tiene que decir sobre consultas de medios; ¡tenga en cuenta que incluso puede decirle al navegador que use hojas de estilo completamente diferentes dependiendo de los resultados de las consultas de @media!
  6. Si desea profundizar en las consultas de los medios, considere venir a nuestra ubicación de Miami para nuestro Cursos para desarrolladores web front-end!

RECURSOS: Tutorial developers.google.com | tutoriales de w3schools

Herramientas para desarrolladores de Google Chrome

OBJETIVO: Probar su sitio web en varios dispositivos, sin tener que comprar todos los dispositivos.

CÓMO HACERLO: Después de aprender las consultas de @media y Bootstrap de Twitter, aprender a usar las herramientas de desarrollo de Google Chrome para probar su sitio web en varios dispositivos es un paseo por el parque. Antes de comenzar, asegúrese de que está viendo esta página en una ventana de Google Chrome (si no tiene Chrome, descárguela aquí y luego abra esta página nuevamente en el navegador Chrome).

  1. Haga clic con el botón derecho básicamente en cualquier lugar de la página (incluso en estas palabras, si lo desea) y seleccione "inspeccionar" en el menú del botón derecho. Esto debería abrir un nuevo marco en la página, que contiene todo el código de front-end para cualquier sitio web que esté viendo en este momento (en este caso, esta publicación de blog).
  2. En la esquina superior izquierda de ese marco, verá un par de pequeños íconos. Uno de ellos parece un icono de teléfono inteligente / tableta; si coloca el cursor sobre él, verá las palabras "Alternar barra de herramientas del dispositivo". Haga clic en ese icono y Chrome le mostrará cómo se verá su sitio web en varios dispositivos.
  3. En la parte superior de la pantalla, puede ver la palabra "receptivo" o puede ver el nombre de un teléfono inteligente / tableta / dispositivo común. Si dice "receptivo", puede cambiar el tamaño de la ventana del navegador para ver cómo se verá su sitio web en varios tamaños de ventana. Si dice el nombre de un dispositivo (como "iPhone 6", por ejemplo), la pantalla le muestra cómo se verá su sitio web en esos dispositivos. Puede cambiar entre dispositivos haciendo clic en la pequeña flecha junto al nombre del dispositivo (o la palabra "receptivo"). Para ver una lista más larga de dispositivos y opciones avanzadas, haga clic en la opción "editar" en la parte inferior del menú desplegable del dispositivo.

RECURSOS: Descargar Google Chrome | Más información sobre las herramientas para desarrolladores

 

Fragmento de código (para el desafío de consultas de medios anterior)

¡Sin lista de espera! ¡Empiece su carrera hoy!

La Escuela de Enfermería y Tecnología de FVI NO tiene lista de espera y tiene tres fechas de inicio al año para que pueda comenzar la escuela de enfermería cuando esté listo

Programe una sesión de planificación de carrera