2

この問題で頭が痛くて、どこから来ているのかわからない

基本的に私はこのサイトを作っています。OK、モバイルで試すまではすべて正常に動作しています。信じられないほど小さいです。私は他のサイトで同じ方法を使用して作業しましたが、これはまったく起こりませんでした.メタまたはメディアクエリを使用する必要はありませんでした.それはまだナビゲーションメニューだけです. そのため、クラス行で ul を使用し、col-sm-12 および col-md-4 で li を使用しているので、希望どおりに動作します。

それがPCビュー PCビュー

それがモバイルビューです

モバイルビュー

すべてのサイズはレムとエムです。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 に答える