如何使我当前的opencart主题具有响应性? [英] How can i make my current opencart theme responsive?

问题描述

如何使我当前的活动opencart主题具有响应性?我正在使用themeforest中的主题购物车.

How can i make my current active opencart theme responsive? I am using the theme shopcart from themeforest.

致谢

推荐答案

我建议使用CSS媒体查询并创建3-4个不同的CSS文件.

I would recommend using css media queries and create 3-4 different css files.

另一种选择是创建不同的主题，在php中检测用户设备并加载正确的主题，但这可能对于您的需求而言是一个致命的打击.

The other option will be creating different themes, detecting the user device in php and load the correct theme, but that will probably be an over kill for your needs at this point.

在以下示例中，我正在使用3个CSS文件(mobile.css，tablet.css，desktop.css)，但根据您的设计，您可能需要使用4个或更多文件.

In the following example, I am using 3 css files (mobile.css, tablet.css, desktop.css) but you may need to use 4 or more files, depending on your design.

找到目录/视图/主题/{您的主题}/template/common/header.tpl，并将旧的CSS链接替换为以下内容(*在修改任何内容之前不要忘记保存备份):

Locate catalog/view/theme/{your theme}/template/common/header.tpl and replace the old css link to the following (*don't forget to save a backup before modifying anything):

@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);

转到目录/视图/主题/{您的主题}/样式表，然后将stylesheet.css更改为desktop.css.然后将其复制两次，然后将副本重命名为mobile.css和tablet.css.

Go to catalog/view/theme/{your theme}/stylesheet and change stylesheet.css to desktop.css. Then duplicate it twice, then rename the copies to mobile.css and tablet.css.

然后您可以开始编辑单个的CSS文件，以使您的主题具有响应性.

You can then start editing the invidvidual css files to make your theme responsive.

最后，很多人都忘记了它，您实际上必须告诉浏览器使屏幕尺寸适合设备尺寸.否则，大多数移动设备将模拟"为具有台式机分辨率，并且用户将不会获得移动友好的体验. 您可以通过将以下行添加到header.tpl中来做到这一点:

Lastly, and offently forgotten by many, you have to actually tell the browser to fit the screen size to the device size. Otherwise, most mobile devices will 'simulate' as having a desktop resolution and users will not have a mobile friendly experience. You can do so by adding the following line to header.tpl:

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

要针对不同的屏幕尺寸开发和测试您的网站，可以使用许多第三方工具.一种简单(免费)的方法是使用内置的FireFox的响应式设计模式.还有其他工具，但是除非您需要模拟的不仅仅是屏幕尺寸，否则我目前没有任何理由使用它们.

To develop and test out your site for different screen sizes, you can use many 3rd party tools. One of the easier (and free) ways will be using the built in FireFox's Responsive Design Mode. There are other tools out there but unless you need to simulate more than just the screen size, I don't see any reason to use them at this point.

希望这会有所帮助！

这篇关于如何使我当前的opencart主题具有响应性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！