responsive-design - tag - viewport css responsive

¿Cómo puedo hacer que mi tema actual de Opencart responda?

Question

¿Cómo puedo hacer que mi actual tema activo de Opencart responda? Estoy usando el carrito de compras del tema de themeforest.

Saludos

Answer 1

Recomendaría usar consultas de medios css y crear 3-4 archivos css diferentes.

La otra opción creará diferentes temas, detectará el dispositivo del usuario en php y cargará el tema correcto, pero en este punto probablemente sea un exceso de muerte para sus necesidades.

En el siguiente ejemplo, estoy usando 3 archivos css (mobile.css, tablet.css, desktop.css) pero es posible que deba usar 4 o más archivos, dependiendo de su diseño.

Localice catalog / view / theme / {your theme} /template/common/header.tpl y reemplace el antiguo enlace css por el siguiente (* no olvide guardar una copia de seguridad antes de modificar nada):

@import url(mobile.css) only screen and (max-width: 568px);
@import url(tablet.css) only screen and (min-width: 569px) and (max-width: 959px);
@import url(desktop.css) only screen and (min-width: 960px);

Vaya a catalog / view / theme / {your theme} / stylesheet y cambie stylesheet.css a desktop.css. Luego, duplíquelo dos veces, luego cambie el nombre de las copias a mobile.css y tablet.css.

Luego puede comenzar a editar los archivos css invidvidual para hacer que su tema responda.

Por último, y olvidados por muchos, tiene que decirle al navegador que ajuste el tamaño de la pantalla al tamaño del dispositivo. De lo contrario, la mayoría de los dispositivos móviles ''simularán'' una resolución de escritorio y los usuarios no tendrán una experiencia amigable para dispositivos móviles. Puede hacerlo agregando la siguiente línea a header.tpl:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width"/>

Para desarrollar y probar su sitio para diferentes tamaños de pantalla, puede usar muchas herramientas de terceros. Una de las formas más sencillas (y gratuitas) será utilizar el modo de diseño receptivo integrado de FireFox. Existen otras herramientas, pero a menos que necesite simular algo más que el tamaño de la pantalla, no veo ningún motivo para usarlas en este momento.

¡Espero que esto ayude!