29 de junio de 2007, el Iphone se lanza al mercado. Todo cambió en el diseño y desarrollo web. Los usuarios ya no sólo entran en sus PC / pantallas, ahora hay minipantallas con un navegador completo que acceden a nuestra web. Hasta entonces, eran navegadores no completos, como el actual Ópera Mobile.
2023 casi, han pasado 15 años ... aún hay webs no accesibles mediante móvil. QUIN CE A ÑOS.
Lo mejor que se puede hacer es adaptar cada componente según la resolución de pantalla. No cortes generales, sino para cada elemento cuando lo pida, es decir, cuando veáis que en pantalla se ve feo.
Y habitual. Como normalmente tenemos un proyecto muy grande y queremos que sea mantenible, solemos marcar unos cortes generales para Móvil → Tablet → Escritorio, a poder ser en ese orden.
@media screen {
* { font-family: sans-serif }
}
@media print {
* { font-family: Consolas, monospace }
}
@media screen and (min-width: 600px) {}
@media screen and (max-width: 600px) {}
@media screen and (min-width: 600px) and (max-width: 920px) {} // No tan recomendadas
@media all and (device-width: 800px) {}
@media all and (orientation:portrait) {}
@media all and (orientation:landscape) {}
Aquí utilizar preprocesadores nos permite guardarlo como variables globales del proyecto y utilizarlo de una forma más legible para quien desarrolle.
$break-tiny-end: 400px !default;
$break-small-end: 800px !default;
$break-medium-end: 1030px !default;
$smallPhone: "only screen and (max-width : #{$break-tiny-end})" !default;
$phone : "only screen and (max-width : #{$break-small-end})" !default;
$tablet : "only screen and (max-width : #{$break-medium-end})" !default;
$desktop: "only screen and (min-width : #{$break-medium-end + 1})" !default;
$nonPhone: "only screen and (min-width : #{$break-small-end + 1})" !default;
$bigScreen : "only screen and (min-width : 1450px)" !default;
// Y luego
@media #{$phone}{} // etc
NO, aún no se pueden utilizar variables CSS para esto 😢