Question

如何让我当前的主动opencart主题响应？我正在使用来自themeforest的主题购物车。

此致

Answer 1

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

另一个选项是创建不同的主题，在php中检测用户设备并加载正确的主题，但此时可能会过度杀死你的需求。

在以下示例中，我使用3个css文件（mobile.css，tablet.css，desktop.css），但您可能需要使用4个或更多文件，具体取决于您的设计。

找到catalog / view / theme / {your theme} /template/common/header.tpl并将旧的css链接替换为以下内容（*不要忘记在修改任何内容之前保存备份）：

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

转到catalog / view / theme / {your theme} / stylesheet并将stylesheet.css更改为desktop.css。然后复制两次，然后将副本重命名为mobile.css和tablet.css。

然后，您可以开始编辑invidvidual css文件，以使主题响应。

最后，并且被许多人遗忘，您必须实际告诉浏览器使屏幕大小适合设备大小。否则，大多数移动设备将“模拟”为具有桌面分辨率，用户将无法获得移动友好体验。您可以通过在header.tpl中添加以下行来实现：

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

要针对不同的屏幕尺寸开发和测试您的网站，您可以使用许多第三方工具。一种更简单（和免费）的方法是使用内置的FireFox Responsive Design Mode。还有其他工具，但除非您需要模拟的不仅仅是屏幕尺寸，否则我认为没有任何理由在此时使用它们。

希望这有帮助！

如何使我当前的opencart主题响应？

1 个答案: