2

我对这个问题感到头疼，我不知道它来自哪里

基本上我正在制作这个网站，好的，一切都很好，直到你在移动设备上尝试它，它非常小。我在其他网站上使用过相同的方法，但这根本没有发生，我不必使用元或任何媒体查询，它仍然只是一个导航菜单。因此，我将 ul 与 class row 一起使用，将 li 与 col-sm-12 和 col-md-4 一起使用，因此它可以正常工作。

那是电脑视图 电脑视图

那是手机视图

移动视图

所有尺寸均以 rem 和 em 为单位。itens 应该在移动时堆叠，确实如此，但它的所有东西都超级小

演示： https ://jsfiddle.net/nnhfqL2L/2/

body {
margin: 0;
padding: 0;
border: 0;
background-color: #666;
font-family: 'Roboto', Verdana, Tahoma, sans-serif;
}

/*Header*/
/*Nav*/
nav {
    border-bottom: 4px solid #888;
}

nav ul {
    margin: 0;
    padding: 0;
    border: 0;
    list-style-type: none;
    background-color: #fff;
    text-align: center;
        font-size: 1.5rem;
}

    nav ul li {
        display: inline-block;
    }

        nav ul li a,a:hover {
            text-decoration: none;
            color: #000;
        }

            nav ul li section {
                padding: 0.8em;
            }

            nav ul li .menuStrap {
                background-color: #000;
                height: 3px;
                margin: 0 auto;
                width: 0;
                transition: width 0.2s;
                transition-timing-function: ease-out;
            }

            nav ul li a:hover .menuStrap {
                width: 100%;
            }


<header>
    <nav>
        <ul class="row">                
            <li class="col-sm-12 col-md-3">
                <a href="#">                    
                    <section>Winpad ★&lt;/section>
                    <div class="menuStrap"></div>                       
                </a>
            </li>
            <li class="col-sm-12 col-md-3">
                <a href="#">
                    <section>Produtos</section>
                    <div class="menuStrap"></div>
                </a>
            </li>
            <li class="col-sm-12 col-md-3">
                <a href="#">
                    <section>Sobre</section>
                    <div class="menuStrap"></div>
                </a>
            </li>
            <li class="col-sm-12 col-md-3">
                <a href="#">
                    <section>Contato</section>
                    <div class="menuStrap"></div>
                </a>
            </li>
        </ul>       
    </nav>

</header>
4

3 回答 3

6

把它放在<head>：

<meta name="viewport" content="width=device-width, initial-scale=1">

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

顺便说一句，最好手动将浏览器窗口调整到所需大小，您可以下载浏览器的扩展程序/插件来调整浏览器窗口大小或显示当前窗口大小。

于 2015-10-01T12:40:24.707 回答
0

那是视口问题：将视口元标记更改为：

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimum-scale=1"/>
于 2015-10-01T12:40:12.060 回答
0

部分尝试<head>：

<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no" />

或在媒体查询中，您可以为小分辨率使用不同的字体大小..

@media(min-width:480px){html{font-size: 90%}}
于 2015-10-01T12:45:49.430 回答