Im使用默认主题的编辑版本。我想有多个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>
感谢
要用屏幕宽度调整显示大小，必须使用：
<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 } ?>
创建露天艺术主题
- http://code.tutsplus.com/tutorials/create-a-custom-theme-with-opencart-introduction--cms-21786
- http://code.tutsplus.com/tutorials/create-a-custom-theme-with-opencart-part-two--cms-21865
- http://code.tutsplus.com/tutorials/create-a-custom-theme-with-opencart-part-three--cms-21890
- http://code.tutsplus.com/tutorials/create-a-custom-theme-with-opencart-part-four--cms-21932
要清除opencart缓存：
- 位于public_html/image/cache中的图像缓存
- 如果您有vqmod public_html/vqmod/vqcache
- 系统缓存public_html/system/cache
不要只删除缓存文件夹中的内容文件夹。