27 septiembre

Trabajar con dimensiones de dispositivos móviles en responsive css

: 0 Comments
Magento Responsive CSS Templates Themes

Hola amantes de #Magento! El articulo de esta semana está relacionado con la hoja de estilo de nuestros templates adaptables. Usted puede preguntarse cómo se puede detectar las dimensiones de un dispositivo móvil para cambiar / añadir elementos css cuando se navega en un template con un iPhone o cualquier otro dispositivo móvil. Es muy simple:

En todos nuestros temas sensibles, trabajamos con 1 archivo para detectar los dispositivos móviles por la dimensión y luego aplicamos cambios css correspondientes para modificar el tema y que este se ajuste correctamente. Este archivo es responsive.css y puede estar ubicado en la carpeta skin / frontend / default / yourtheme / css.

iPhone: @media (max-width: 480px) {}

iPhone Horizontal / Nexus Vertical: @media (min-width: 480px)and (max-width: 768px){}

Nexus Horizontal / iPad Vertical: @media (min-width: 768px) and (max-width: 979px) {}

iPad horizontal: @media (min-width: 980px) {}

Por ejemplo, eche un vistazo a esta sección del archivo responsive.css de HelloNevada Magento CE, donde modificamos algunas propiedades CSS del selector de divisas, cuando se navega el template en un dispositivo con un ancho máximo de 480px:

@media only screen and (max-width: 480px)

{

.currency-switch {  border-radius: 0 0 3px 0; float: right; padding: 14px 0 6px 10px;  position: relative;  width: 10%;}

}

Ok, espero que este consejo le ayuda, si tienes alguna opinión o duda, deja un comentario!

This post is also available in: Inglés

Back to Top