Responsive-website source code github
</div>FuenteEl código anterior incrusta un vídeo de YouTube como un iframe y un contenedor div con la clase videoWrapper.Desglose del código:Responsive Design Checker5. Definir la tipografíaGeneralmente, los desarrolladores web definen los tamaños de las fuentes con píxeles. Esto funciona en sitios web estáticos, pero los sitios web responsivos necesitan una fuente responsiva. El tamaño de la fuente debe cambiar con respecto al ancho del contenedor principal. Esto es necesario para que la tipografía se ajuste al tamaño de la pantalla y sea fácilmente legible en múltiples dispositivos.En la especificación CSS3, busca la unidad llamada rems. Es similar a la unidad em pero actúa de forma relativa al elemento HTML. Debido a esto, el código debe restablecer el tamaño de la fuente HTML:html { font-size:100%; }Ahora define los tamaños de fuente responsivos:@media (min-width: 640px) { body {font-size:1rem;} }
გამოხმაურება
Saltar al contenidoCómo hacer un sitio web responsivo en 3 sencillos pasosHoy en día, un sitio web no debe verse bien sólo en una pantalla de escritorio, sino también en tabletas y smartphones.Un sitio web es responsivo si es capaz de adaptarse a la pantalla del cliente.El diseño web responsivo es extremadamente importante hoy en día y es, de hecho, una técnica que debes dominar como desarrollador o diseñador web.En este artículo, te mostraré cómo construir fácilmente un sitio responsivo y cómo aplicar técnicas de diseño responsivo en páginas web existentes en tres sencillos pasos.
Una vez hecho esto, vamos a ver cómo de responsivo es tu diseño. Para ello, utilizo esta impresionante herramienta creada por Matt Kersley. Por supuesto, puedes comprobar el resultado en tu propio dispositivo móvil.2 – MediasUna maquetación responsiva es el primer paso hacia un sitio web totalmente responsivo. Ahora, vamos a centrarnos en un aspecto muy importante de un sitio web moderno: los medios de comunicación, como los vídeos o las imágenes.El código CSS que aparece a continuación garantizará que tus imágenes nunca sean más grandes que su contenedor principal. Es súper sencillo y funciona para la mayoría de los sitios web responsivos. Para que funcione correctamente, hay que insertar este fragmento de código en tu hoja de estilos CSS.img { max-width: 100%; height: auto; }Aunque la técnica anterior es eficiente, a veces puedes necesitar tener más control sobre las imágenes y mostrar una imagen diferente según el tamaño de la pantalla del cliente.Aquí tienes una técnica desarrollada por Nicolas Gallagher. Vamos a empezar con el html:
Sitio web completamente receptivo
Antes de pensar en hacer un sitio web responsivo es necesario entender cómo hacer un sitio web móvil primero. Es una habilidad clave en el mundo del desarrollo web de hoy en día y, en mi opinión, la mejor manera de hacer un sitio web y en realidad lo hace más fácil.
La idea es estructurar tu html y css pensando primero en el móvil. Cuando tengas tu html hecho, ábrelo en el navegador e inspecciona el elemento, y elige la opción de pantalla del iPhone 5SE. Es el tamaño de pantalla móvil más pequeño que encontrarás con 320px de ancho. Este será tu lienzo en lugar de la vista completa de escritorio. Eso será lo último. Vamos a empezar por el móvil, y aquí es donde empieza. Me gusta hacer un zoom del 75% para que no sea tan pequeño. Este es el tamaño de pantalla para el que escribirás tu css. No es necesario hacer media queries. Sólo escribe el código que hace que todo se ajuste a este tamaño de pantalla. ¡Ese es el comienzo de la programación mobile first!
Estos son los estándares con los que trabajo y, a veces, añades media queries entre medias para asegurarte de que algunos elementos especiales encajan. Me gusta empezar a escribir css para que se ajuste a pantallas de 320px y luego añadir una consulta de medios para un ancho mínimo de 400px y hacer ajustes de tamaño para los teléfonos más grandes donde sea necesario, como aumentar el tamaño de las fuentes, el tamaño de los iconos, etc. Empiezo en 320px porque esa es la pantalla más pequeña posible que encontrarás, así que si quieres ser totalmente responsivo, tenemos que tenerlos en cuenta y luego añadir una nueva consulta de medios para los teléfonos más grandes y adaptar el sitio a ellos también para la mejor experiencia de usuario y diseño.
Cómo crear un sitio web desde cero utilizando html, css y javascript
En la última serie (“Entendiendo el diseño web responsivo”), definí las características básicas de este nuevo e importante enfoque responsivo para el diseño amigable con el móvil y agnóstico para el dispositivo. Ahora, vamos a preparar el terreno para un trabajo más concreto.
Hemos visto que hay muchos aspectos que hay que tener en cuenta a lo largo del proceso de diseño responsivo: tamaño de la pantalla, plataforma operativa, comportamiento del usuario, etc. Hemos explorado las distintas opciones de medición de las fuentes en un sitio web, y hemos cubierto la mejor manera de abordar la tipografía en términos de diseño web responsivo. Hemos explorado las características de cuatro tipos de diseño diferentes y sus respectivos campos de aplicación. Hemos tratado algunos problemas comunes que un diseñador web puede encontrar al gestionar imágenes responsivas (y hemos señalado posibles soluciones). Por último, hemos explorado el problema de la compatibilidad entre navegadores y hemos propuesto diferentes formas de conseguirla.
Uno de los fundamentos del diseño responsivo son las consultas de medios, que en última instancia hacen que el sitio sea accesible y utilizable por el mayor número de usuarios, incluidos aquellos que no utilizan versiones recientes de navegadores populares como Internet Explorer, Mozilla Firefox y Chrome.