8

レスポンシブ グリッドを作成し、フォント サイズとして em を使用してテキストのサイズを変更しましたが、テキストのサイズ変更がないため、em がどのように機能するかを完全に理解してはいけません。

ライブサイト: http://www.rubytuesdaycreative.co.uk/testsite/shop.html

イーサン・マルコットの本に従って、本文のフォントを に設定し、font-size:100%上記のリンク先のページの cpation 内のテキストを 2ems として作成しました。つまり、基本サイズを 2 倍にしています...間違っていますか? 全然変わらないようです。

http://jsfiddle.net/jm3sK/

4

5 に答える 5

11

@mediaあなたが探しているのはクエリだと思います。Emブラウザの幅に基づいてサイズが変更される魔法の弾丸ユニットではありません。相対単位です。

ブラウザーの幅に基づいて CSS を変更する場合は、@mediaクエリを使用します。

emこの場合、1 つの値 ( body{font-size}) を変更するだけでページの残りすべてを拡大縮小することができるため、 が役立ちます。ブラウザが変わったからではなく、相対的だからです。これらの手法を一緒に使用できます。

ここに簡単な例があります。ウィンドウのサイズを変更します。

body{font-size:100%;}
i{font-size: 2em;}


@media screen and (min-width: 500px) {
    body{font-size: 150%;}
}

@media screen and (min-width: 700px) {
    body{font-size: 200%;}
}

</p>

于 2012-10-16T11:49:33.787 に答える
5

em単位はフォントのサイズを意味します。ブラウザ ウィンドウの幅にはまったく依存しません。

vw単位はウィンドウの幅に関連しており、ビューポートの幅の 1/100 を意味します。ただし、ブラウザでのサポートは限定的でバグがあります。

于 2012-10-15T22:05:36.213 に答える
3

これは古い質問ですが、最近解決策を思いつきました。

本文内のすべてのテキストをパーセンテージとして定義し、document.ready および window.resize で本文内のテキストのサイズを変更すると、テキストは 100% レスポンシブのままになります。

例えば

CSS
font-size: 100%;

JavaScript
function fontResize(){
    var perc = parseInt($(window).width())/125;
    $('body').css('font-size',perc);
}

JQuery
$(document).ready(function (){
    fontResize();
});

$(window).resize(function () {
    fontResize();
});
于 2015-01-29T11:06:57.030 に答える