0

アイコン フォントとテキスト シャドウを使用していくつかのバブルを作成しました。これらのバブルのサイズをすべてのズーム レベルで同じに保つ必要があります。

ここに私の構文があります

span.bubble_1 {
        position: absolute;
        top: percentage(22 / 661);
        left: percentage(66 / 658);

        &:before {
            content : attr(data-icon);
            color: transparent;
            opacity: 0.18;
            font-size: 132px;
            @include text-shadow(0 0 30px #0070b1);
        }
}

フォント サイズは実際にはバブル サイズです。ブラウザのすべてのズーム レベルでフォント サイズを等しくしたい

純粋なCSSの方法はありますか?

編集：私はたくさん検索して、TEXT-SIZE-ADJUSTと呼ばれるCSS3プロパティがあることを発見しましたが、主要なブラウザではサポートされていません

4

2 に答える 2

0

これを試してみてください。

132 *ズームレベル

ズーム レベルの値は 10 進数で確認してください。

于 2013-08-07T03:28:41.933 に答える
0

JavaScript を使用する場合は、次のコードを使用します。

HTML:

<p>This text will preserve its size</p>

Javascript:

window.onload = setSize();
window.onresize = setSize();

function setSize()
{
    para = document.querySelector('p');
    windowHeight = parseInt(window.innerHeight);
    newSize = 0.05*windowHeight;        // Change 0.05 to control size
    para.style.fontSize = newSize;  
}

この単純なコードでは、マージン サイズの変更によりテキストの位置が変更されるため、次のコードを追加するだけでそれを回避できます。

body {  margin: 0; }

出力領域は Web ページ自体ではないため、これは jsfiddle では機能しません。直接実行します。

于 2015-07-14T10:35:53.773 に答える