Question

我正在使用默认主题的编辑版本。我想为手机和平板电脑提供多个css文件。我已将styles.css和tablet.css添加到stylesheet.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 个答案: