2017-03-07 5 views
0

私はウェブサイトを作り、それをうまく縮めようとしていますが、テキストは同じサイズのままではありません。ブラウザをズームインするとテキストが同じサイズにならないのはなぜですか?

例:

p { 
 
    width: 10%; 
 
    height: 10%; 
 
    background-color: rgb(0,0,0); 
 
    top: 50%; 
 
    left: 50%; 
 
    position: fixed; 
 
    color: rgb(255,255,255); 
 
    font-size: 175%; 
 
}
<!DOCType html> 
 
<html> 
 
    <head> 
 
    <title>:(</title> 
 
    </head> 
 
    <body> 
 
    <div><p>TEXT</p></div> 
 
    </body> 
 
</html>

これは一例です。私はそれをやっているのではない。ブラウザをズームインまたはズームアウトすると、divは同じサイズになりますが、テキストはボックス内に残りません。

答えて

-1

以前の回答:パーセンテージの代わりにemを使用してください。

スケールをよく調整するには、CSSの相対的な測定が必要です。 emとパーセンテージがあなたを助けることができます。

あなたが/アウトでズームされているブラウザにもかかわらず、テキストは同じサイズのままにしたい場合は、この使用してビューポートを達成することができます

https://css-tricks.com/examples/ViewportTypography/

p { 
    font-size: 2vmin; 
} 

しかしこれは推奨されていないとフォーマットをvh、vw、およびvminにはcompabitiliesの問題があります。

+0

助けにならない –

+0

vh、vwなどを使うのは悪い考えですか? – BOBONA

+0

@BOBONAこれは、ユーザーがズーム設定をテキストに変更した場合、ページが期待どおりに応答しないため、これは誤りのない解決策ではありません。 – FrenchMajesty

0

私はピクセル単位ですべてのものを指定しますことを決めましたスクロールするようにオーバーフローを設定します。誰が見ても、まったく同じページが表示されます。彼らはそれをすべて見るためにスクロールしなければならないかもしれません。 これらの新しいテキスト属性すべてでブラウザが最新の状態になったら、これは実用的ではないかもしれません。

関連する問題