如何在 opencart 主题中为手机和平板电脑添加多个样式表

Question

我使用的是默认主题的编辑版本。 我想为手机和平板电脑设置多个 css 文件。 我在 stylesheet.css 代码之后立即将 mobile.css 和 tablet.css 添加到头文件中

但是样式表没有加载。 如果我调整浏览器的大小，则不会进行任何更改。

我的 header.tpl 看起来像这样：

<!DOCTYPE html>
<!--[if IE]><![endif]-->
<!--[if IE 8 ]><html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>" class="ie8"><![endif]-->
<!--[if IE 9 ]><html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php echo $title; ?></title>
<base href="<?php echo $base; ?>" />
<?php if ($description) { ?>
<meta name="description" content="<?php echo $description; ?>" />
<?php } ?>
<?php if ($keywords) { ?>
<meta name="keywords" content= "<?php echo $keywords; ?>" />
<?php } ?>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<?php if ($icon) { ?>
<link href="<?php echo $icon; ?>" rel="icon" />
<?php } ?>
<?php foreach ($links as $link) { ?>
<link href="<?php echo $link['href']; ?>" rel="<?php echo $link['rel']; ?>" />
<?php } ?>
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">

<link href="catalog/view/theme/default/stylesheet/mobile.css" rel="stylesheet">

<?php foreach ($styles as $style) { ?>
<link href="<?php echo $style['href']; ?>" type="text/css" rel="<?php echo $style['rel']; ?>" media="<?php echo $style['media']; ?>" />
<?php } ?>
<script src="catalog/view/javascript/common.js" type="text/javascript"></script>
<?php foreach ($scripts as $script) { ?>
<script src="<?php echo $script; ?>" type="text/javascript"></script>
<?php } ?>
<?php echo $google_analytics; ?>
</head>

谢谢

Answer 1

要使用屏幕宽度调整显示大小，您必须使用：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link re`l="stylesheet" href="main.css" media="screen>
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 640px)">

在此示例中，所有情况都使用 main.css，当屏幕低于 640px 时将应用 mobile.css（如果需要，您可以添加另一个以降低分辨率）

在您的代码中，应该一直应用移动 css，所以也许您应该使用浏览器控制台来检查链接是否良好...

并检查你是否没有覆盖你的css

<?php foreach ($styles as $style) { ?>
<link href="<?php echo $style['href']; ?>" type="text/css" rel="<?php echo $style['rel']; ?>" media="<?php echo $style['media']; ?>" />
<?php } ?>

创建 opencart 主题

清除 opencart 缓存：

图片缓存位于 public_html/image/cache
如果你有 vqmod public_html/vqmod/vqcache
系统缓存 public_html/system/cache

不要只删除缓存文件夹中的内容。

如何在 opencart 主题中为手机和平板电脑添加多个样式表

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-10-30 09:50:44

如何在 opencart 主题中为手机和平板电脑添加多个样式表

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-10-30 09:50:44

解决方案1
0 已采纳 2015-10-30 09:50:44