jquery - joomla 模板 index.php 与 jquery

Question

在我的 joomla 模板中，我删除了 index.php 头部中样式表的链接，而是添加了以下 jquery 代码来选择基于屏幕宽度的样式表

<script type="text/javascript">

$(document).ready(function() 
{
    if (screen.width <= 1024) 
    {
      $('head').append('<link rel="stylesheet" href="style2.css" type="text/css"/>');
    }
}

$(document).ready(function() 
{
    if (screen.width > 1024)
    {
       $('head').append('<link rel="stylesheet" href="template.css" type="text/css/>');
    }
}
</script>

当我在浏览器中加载网站时，没有使用样式表。我不明白出了什么问题。提前致谢

EvilP，感谢您的回复，是的，css 与 index.php 位于同一位置

Answer 1

你不应该用 javascript 来做，你应该使用媒体查询来提供不同的样式 fpr 不同的屏幕尺寸

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}