0

レスポンシブウェブデザインでウェブを作成しようとしていますが、ブラウザウィンドウのサイズを変更するときにテキストのサイズを変更することはできません。イーサン・マーコットの「レスポンシブウェブデザイン」という本をフォローしています

これは私のスタイルシートとhtmlの一部です：

body {
font-size: 100%;
}
#nav-bar {
font-size: 1.0em;
}


<header>
    <div id="nav-bar">
        <nav>
            <ul>
                <li><a href="">Item1</a></li>
                <li><a href="">Item2</a></li>
                <li><a href="">Item3</a></li>
            </ul>
        </nav>
   </div>
</header>
4

2 に答える 2

1

css3メディアクエリの使用を検討しています。つまり、ブラウザの幅が980px未満の場合は、フォントサイズを...に変更します。

例えば、

body {
     font-size: 100%;
}

#nav-bar {
     font-size: 1.0em;
}

@media (min-width: 980px) 
{ 
    #nav-bar { font-size: 2em } 
}

簡単な概要については、http：//cssmediaqueries.com/what-are-css-media-queries.htmlを参照してください。

于 2012-11-23T01:11:43.213 に答える
1

これらの新しいプロパティを使用すると、ビューポートのサイズに応じてフォントサイズを拡大縮小できます。

1vw is 1% of the viewport width
1vh is 1% of the viewport height
1vmin is the smallest of 1vw and 1vh

たとえば、ブラウザのビューポートが1,000x1,200ピクセルに設定されているとします。

1.5vw = 15px font size
1.5vh = 18px font size
1.5vmin = min(1.5vw, 1.5vh) = 15px font size

新しいユニットはレスポンシブデザインに革命をもたらします—

ソース：http ：//www.sitepoint.com/new-css3-relative-font-size/

于 2013-12-29T23:01:11.510 に答える