La mejor manera de aprender sobre el diseño web receptivo es echar un vistazo a las cuadrículas utilizadas por algunos de los marcos frontales ya existentes. Si bien pueden ser más de lo que necesita, puede estudiar la forma en que manejan los diversos puntos de interrupción y dispositivos que dominan el mercado.
El error que mucha gente comete es simplemente usar los marcos frontales y nunca echar un vistazo debajo del capó.
- Bootstrap · El marco front-end más popular del mundo para dispositivos móviles y receptivo.
- El marco front-end receptivo más avanzado del mundo.
- Placa de respuesta CSS receptiva
Skeleton es en realidad el más ligero de los 3. Es simplemente un punto de partida CSS y no viene con ninguna característica adicional.
Luego recomendaría usar el navegador Chrome o Firefox ya que tienen herramientas de desarrollador realmente buenas.
- ¿Cuál es la mejor plataforma en línea donde puedo usar mi habilidad de diseño y cobrar?
- ¿Qué tendencias hay para el diseño de interiores?
- ¿Cuál es el mejor diseño de sitio web?
- ¿La industria del diseño de automóviles está bien desarrollada en la India?
- ¿Cuáles son las etapas del pensamiento de diseño?
Simplemente puede hacer clic con el botón derecho del mouse en el navegador, inspeccionar elementos y debería ver un icono que significa un dispositivo móvil. Haz clic en eso.
Debería poder ver los diferentes tamaños y puntos de interrupción utilizados para diferentes dispositivos y puede ver cómo se vería un sitio web en esos dispositivos.
Aquí hay algunos puntos de corte de muestra de bootstrap.
/ * Dispositivos extra pequeños (teléfonos, menos de 768 px) * /
/ * Sin consulta de medios ya que este es el valor predeterminado en Bootstrap * /
/ * Dispositivos pequeños (tabletas, 768 px y más) * /
@media (ancho mínimo: @ screen-sm-min) {…}
/ * Dispositivos medianos (computadoras de escritorio, 992 px y superiores) * /
@media (min-width: @ screen-md-min) {…}
/ * Dispositivos grandes (escritorios grandes, 1200 px y más) * /
@media (min-width: @ screen-lg-min) {…}
Aquí hay algunos más.
@media (ancho máximo: @ screen-xs-max) {…}
@media (min-width: @ screen-sm-min) y (max-width: @ screen-sm-max) {…}
@media (min-width: @ screen-md-min) y (max-width: @ screen-md-max) {…}
@media (min-width: @ screen-lg-min) {…}
Puntos de quiebre de la Fundación
/ * Solo pequeño * /
@media screen y (ancho máximo: 39.9375em) {}
/ * Medio y arriba * /
@media screen y (min-width: 40em) {}
/ * Solo medio * /
@media screen y (min-width: 40em) y (max-width: 63.9375em) {}
/ * Grande y arriba * /
@media screen y (min-width: 64em) {}
/ * Solo grande * /
@media screen y (min-width: 64em) y (max-width: 74.9375em) {}
Puntos de corte de esqueleto
/ * Primeras consultas móviles * / / * Más grande que móvil * / @media (ancho mínimo: 400px) {} / * Más grande que phablet * / @media (ancho mínimo: 550px) {} / * Más grande que tableta * / @media (ancho mínimo: 750px) {} / * Más grande que el escritorio * / @media (ancho mínimo: 1000px) {} / * Más grande que el Desktop HD * / @media (ancho mínimo: 1200px) {}
También hay un montón de videos que puedes ver en YouTube y algunos sitios gratuitos de capacitación en línea que pueden ser muy útiles.
Espero que esto ayude.
Si encuentra útil mi respuesta, consulte mi escritura en mi sitio web Temas premium de WordPress, diseño y desarrollo y videos en YouTube PixemWeb