En w3school:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Ejemplos:
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
Tutorial bastante completo:
https://www.adictosaltrabajo.com/2012/10/11/css3-media-queries/
En css trick:
https://css-tricks.com/a-complete-guide-to-css-media-queries/
Lista de resoluciones para todos los dispositivos:
Las más comunes:
Un artículo muy bueno sobre uso de media query.
Qué es el diseño responsive:
https://i.workana.com/glosario/que-es-el-diseno-responsive/
Ejemplos responsive:
https://web.dev/responsive-web-design-basics/
9 principios del diseño responsive:
https://blog.froont.com/9-basic-principles-of-responsive-web-design/
Menú hamburguesa solo CSS:
https://codepen.io/alvarotrigo/pen/MWEJEWG
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | /* Extra small devices (phones, 600px and down) */@media only screen and (max-width: 600px) { .example {background: red;}}/* Small devices (portrait tablets and large phones, 600px and up) */@media only screen and (min-width: 600px) { .example {background: green;}}/* Medium devices (landscape tablets, 768px and up) */@media only screen and (min-width: 768px) { .example {background: blue;}} /* Large devices (laptops/desktops, 992px and up) */@media only screen and (min-width: 992px) { .example {background: orange;}} /* Extra large devices (large laptops and desktops, 1200px and up) */@media only screen and (min-width: 1200px) { .example {background: pink;}} |
