Question

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

基本上我正在制作这个网站，好吧，一切都运转正常，直到你在手机上试试，它非常小。我在其他网站上使用相同的方法工作，这根本没有，我没有使用元或任何媒体查询，它仍然只是一个导航菜单。因此，我使用带有类行的ul和带有col-sm-12和col-md-4的li，因此它可以正常工作。

这是个人电脑的观点

这是移动视图

所有尺码都是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 ★</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>

Answer 1

将其放入<head>：

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

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

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

Answer 2

这是视口问题：将您的视图端口元标记更改为：

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

Answer 3

在<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%}}

移动设备中的元素较小

3 个答案: