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

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

css opencart

Css 如何在opencart主题中为手机和平板电脑添加多个样式表,css,media-queries,opencart,stylesheet,Css,Media Queries,Opencart,Stylesheet,Im使用默认主题的编辑版本。我想有多个css文件的手机和平板电脑。我已经将mobile.css和table.css添加到了stylesheet.css代码后面的头文件中但是，样式表没有加载。如果调整浏览器的大小，则不会进行任何更改 My header.tpl的外观如下所示： <!DOCTYPE html>  <!--[if IE 8 ]><html dir="<?php echo $di

Im使用默认主题的编辑版本。我想有多个css文件的手机和平板电脑。我已经将mobile.css和table.css添加到了stylesheet.css代码后面的头文件中

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

My 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)">


“type=“text/css”rel=”“media=”“/>

创建opencart主题






要清除opencart缓存：

位于公共_html/image/cache中的图像缓存
如果您有vqmod public\u html/vqmod/vqcache
系统缓存公共\u html/system/cache

不要删除缓存文件夹，只删除其中的内容。
我也无法让媒体查询在stylesheet.css中工作。有！important它可以工作，但没有！它就不行。您的示例与我的示例相同，因此没有任何意义。@kees。是否要在不使用！important的情况下覆盖任何css。因为如果您的代码与您发布的代码相同，则很重要可能会在php调用中覆盖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 } ?>