时间戳

首页 > 解决方案 > 视口大小更改时，CSS 媒体查询样式将不适用

html - 视口大小更改时，CSS 媒体查询样式将不适用

问题描述

响应式菜单的媒体查询不起作用。原始菜单是一组水平的、等分的选项卡。在移动设备上查看时，我需要在左上角显示一个堆栈/汉堡图标（在下面的代码中 < 600px），它显示为整个页面上的全页居中菜单......例如全屏 div z 索引为 2。

我已经尝试更改最小和最大宽度，并尝试在实际设备以及浏览器内置的开发人员工具/模拟器上查看它......没有变化，一个堆栈图标，将在整个页面上显示菜单移动设备不显示...而是原始（水平，全角）菜单保持可见（即#menu_row& .menu_row）。

@media screen and (min-width: 0px) and (max-width: 600px) {
    #small_menu_row.small_menu_row {
        //responsive menu
        display: block;
        z-index: 2;
        text-align: center;
    }
    #menu_row.menu_row {
        //regular menu
        display: none;
        z-index: 2;
        text-align: center;
    }
}

@media screen and (min-width: 601px){
		#small_menu_row.small_menu_row{        //responsive menu
		display:none;
		z-index:2;
		text-align:center;
	}
	#menu_row.menu_row{       //regular menu
		display:block;
		z-index:2;
		text-align:center;
	}
}	
    <div class="container-fluid" id="outer_most">
    <div class="row blank_row">
        <div class="col">
            &nbsp;
        </div>
    </div>
    <div class="row small_menu_row" id="small_menu_row">
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <img src="<?php echo wp_get_upload_dir()['baseurl'];?>/stack.png">
                    </button>
                    <a class="navbar-brand" href="#"></a>
                </div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link menu-link" href="<?php echo get_site_url()?>/home">HOME</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link menu-link" href="<?php echo get_site_url()?>/trafat">A SAMPLE TITLE</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link menu-link" href="<?php echo get_site_url()?>/estore">e-STORE</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link menu-link" href="<?php echo get_site_url()?>/works">
                                <div class="dropdown">
                                    WORKS
                                    <!--div class="dropdown-content">
                                        <?php /*
                                            $args = array("child_of"=>9, "sort_column"=>"menu_order", "sort_order"=>"ASC");
                                            $pages = get_pages($args);
                                            $count=0;
                                            foreach($pages as $page){
                                            	echo "<a href=\"".get_site_url()."/works/".$page->post_name."\" class=\"book_row\" \">"
                                            	.$page->post_title.
                                            	"</a>";
                                            $count++;
                                            }
                                            */ ?>
                                        </div-->
                                    <div class="dropdown-content">
                            <a href="<?php echo get_site_url()?>/archives/aotr" class="book_row">
                            A SAMPLE TITLE
                            </a>
                            <a href="<?php echo get_site_url()?>/archives/a_v" class="book_row">
                            A SAMPLE TITLE
                            </a>									
                            <span <!--href="<?php echo get_site_url()?>/archives/gallery"--> class="book_row">
                            A SAMPLE TITLE
                            </span>
                            <span <!--href="<?php echo get_site_url()?>/archives/performances"--> class="book_row">
                            A SAMPLE TITLE
                            </span>
                            </div>
                            </div>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link menu-link" href="<?php echo get_site_url()?>/archives">
                                <div class="dropdown">
                                    ARCHIVES
                                    <div class="dropdown-content">
                            <a href="<?php echo get_site_url()?>/archives/aotr" class="book_row">
                            ARTICLES
                            </a>
                            <a href="<?php echo get_site_url()?>/archives/a_v" class="book_row">
                            AUDIO / VISUAL
                            </a>									
                            <a href="<?php echo get_site_url()?>/archives/gallery" class="book_row">
                            IMAGE GALLERY
                            </a>
                            <a href="<?php echo get_site_url()?>/archives/performances" class="book_row">
                            PERFORMANCES
                            </a>
                            <a href="<?php echo get_site_url()?>/archives/events" class="book_row">
                            EVENTS
                            </a>
                            </div>
                            </div>
                            </a>
                        </li>
                        <!--li class="nav-item">
                            <a class="nav-link menu-link" href="<?php /*echo get_site_url()*/?>/forum">FORUM</a>
                            </li-->
                        <li class="nav-item">
                            <a class="nav-link menu-link" href="<?php echo get_site_url()?>/about">ABOUT US</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link menu-link" href="<?php echo get_site_url()?>/contact">CONTACT</a>
                        </li>
                    </ul>
                    <!--ul class="nav navbar-nav navbar-right">
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                        </ul-->
                </div>
            </div>
        </nav>
    </div>
    <div class="row logo_row" id="logo_row">
        <img src="<?php echo wp_upload_dir()['baseurl']; ?>/t2.png" id="img_2">
    </div>
    <div class="row blank_row">
        <div class="col">
            <br>
            <br>
        </div>
    </div>
    <div class="row menu_row" id="menu_row">
        <div class="col col-xl-2 col-lg-2 col-md-1 col-sm-1">
        </div>
        <div class="col col-xl-8 col-lg-8 col-md-10 col-sm-10" id="act_menu">
            <ul class="nav justify-content-between">
                <li class="nav-item">
                    <a class="nav-link menu-link" href="<?php echo get_site_url()?>/home">HOME</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link menu-link" href="<?php echo get_site_url()?>/trafat">A SAMPLE TITLE</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link menu-link" href="<?php echo get_site_url()?>/works">
                        <div class="dropdown">
                            WORKS
                            <!--div class="dropdown-content">
                                <?php /*
                                    $args = array("child_of"=>9, "sort_column"=>"menu_order", "sort_order"=>"ASC");
                                    $pages = get_pages($args);
                                    $count=0;
                                    foreach($pages as $page){
                                    	echo "<a href=\"".get_site_url()."/works/".$page->post_name."\" class=\"book_row\" \">"
                                    	.$page->post_title.
                                    	"</a>";
                                    $count++;
                                    }
                                    */ ?>
                                </div-->
                            <div class="dropdown-content">
                    <a href="<?php echo get_site_url()?>/works/SAMPLETITLE" class="book_row">
                    A SAMPLE TITLE
                    </a>
                    <a href="<?php echo get_site_url()?>/works/SAMPLETITLE" class="book_row">
                    A SAMPLE TITLE
                    </a>									
                    <a href="#" class="book_row">
                    A SAMPLE TITLE
                    </a>
                    <a href="#" class="book_row">
                    A SAMPLE TITLE
                    </a>
                    </div>
                    </div>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link menu-link" href="<?php echo get_site_url()?>/archives">
                        <div class="dropdown">
                            ARCHIVES
                            <div class="dropdown-content">
                    <a href="<?php echo get_site_url()?>/archives/aotr" class="book_row">
                    ARTICLES
                    </a>
                    <a href="<?php echo get_site_url()?>/archives/a_v" class="book_row">
                    AUDIO / VIDEO
                    </a>
                    <a href="<?php echo get_site_url()?>/archives/gallery" class="book_row">
                    IMAGE GALLERY
                    </a>
                    <a href="<?php echo get_site_url()?>/archives/performances" class="book_row">
                    PERFORMANCES
                    </a>
                    <a href="<?php echo get_site_url()?>/archives/events" class="book_row">
                    EVENTS
                    </a>
                    </div>
                    </div>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link menu-link" href="<?php echo get_site_url()?>/estore">e-STORE</a>
                </li>
                <!--li class="nav-item">
                    <a class="nav-link menu-link" href="<?php /*echo get_site_url()*/?>/forum">FORUM</a>
                    </li-->
                <li class="nav-item">
                    <a class="nav-link menu-link" href="<?php echo get_site_url()?>/about">ABOUT US</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link menu-link" href="<?php echo get_site_url()?>/contact">CONTACT</a>
                </li>
            </ul>
        </div>
        <div class="col col-xl-2 col-lg-2 col-md-1 col-sm-1">
        </div>
    </div>

这是 JSFiddle 上的相同代码：http: //jsfiddle.net/zL9cfoj7

预期结果：在移动设备上查看时，常规菜单会隐藏并出现堆栈图标（或宽度 < 600 像素）

实际结果：实际上什么也没发生！

标签： htmlcsswordpressresponsive-design

解决方案

看起来您正在使用 Bootstrap - 为什么不使用内置显示类来处理隐藏/显示？

<!-- visible only on screen size < 576px -->
<div class="row small_menu_row d-block d-sm-none" id="small_menu_row">
...
</div>

<!-- hidden on screen size < 576px, otherwise visible -->
<div class="row menu_row d-none d-sm-block" id="menu_row">
...
</div>

推荐阅读