对于响应式设计，如何为移动用户包括一个不同的header.php文件？

Question

我想为移动设备更改header.php文件。 我已经尝试过此javascript解决方案，但未编写php文件。 我怎样才能解决这个问题？

<script language=javascript>
if (screen.width >= 720 ) 
     $('#header').load('header.php');
else (
     $('#header').load('header-mobile.php');
)
</script>
<div id="header"></div>

谢谢

Answer 1

为什么要导入其他文件？ 您可以将媒体查询与CSS结合使用，并向每种标头类型添加一个类，如下所示：

<div class="mobile-header">
</div>
<div class="header">
</div>

在CSS中，您只需将其隐藏/与媒体查询一起显示即可：

.header-mobile { 
    display: none;
}
@media (max-width: 600px) {
    .header {
        display: none;
    }
    .header-mobile {
        display: block;
    }
}

这意味着您的.header-mobile div将被隐藏，除非您的窗口大小为600px或更小，在这种情况下，您的.header将被隐藏。

希望能帮助到你！