php字符串按最大宽度选择不同的导航类

Question

我的主导航按最大宽度变化。

.main-navigation {
border-left: 1px solid #cccccc;
display: block;
float: right;
font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: bold;
max-width: 50%;
position: relative;
text-align: right;
text-transform: uppercase;
}
@media screen and (max-width: 885px) {
.main-navigation {
border: 0;
float: none;
max-width: 100%;  }

如您所见，第二个代码是当宽度小于 885px 时(如移动设备)。 我已经尝试了很多方法来使用 css 代码为每个样式提供其他样式，但没有分离。 所以，我想为较小的导航制作另一个主导航代码，并称他为 main navigation2。 我需要一些 php 代码添加到按宽度带到导航类的原始代码中。那可能吗？ 这是原始代码:

        <nav id="site-navigation" class="main-navigation"      role="navigation">
        <h1 class="menu-toggle"><span class="screen-reader-text"><?php   _e( 'Menu', 'pictorico' ); ?></span></h1>
        <a class="skip-link screen-reader-text" href="#content"><?php  _e( 'Skip to content', 'pictorico' ); ?></a>

        <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

Answer 1

不幸的是，您无法使用 PHP 获取屏幕宽度。 您可以在 javascript 中通过获取屏幕宽度并通过按 ID 选择它来将其应用于导航标记

<script type='text/javascript'>
  var screenWidth = window.screen.width;
  var element = document.getElementById('site-navigation');
  if (screenWidth < 885) {
    element.className = navigation1;
  }
  else
  {
    element.className = navigation2;
  }
</script>