Question

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

<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 */
}

使用jquery的joomla模板index.php

1 个答案: