私は流動的なウェブサイトを持っていて、メニューはその幅の20％です。メニューのフォントサイズを適切に測定して、常にボックスの幅に合わせ、次の行に折り返さないようにします。「em」を単位として使用することを考えていましたが、これはブラウザのフォントサイズに関連しているため、解像度を変更してもフォントサイズは同じままです。
ptsとパーセンテージも試してみました。必要なものは何も機能しません...
進め方のヒントを教えてください。
回答:
@media screen and (max-width : 320px)
{
body or yourdiv element
{
font:<size>px/em/rm;
}
}
@media screen and (max-width : 1204px)
{
body or yourdiv element
{
font:<size>px/em/rm;
}
}
画面の画面サイズに応じて手動で指定できます。画面サイズを変えて、フォントサイズを手動で追加するだけです。
vw、vh、vminこの答えを揺すります。
vmax
これを達成する方法はいくつかあります。
CSS3は、ビューポートに関連する新しいディメンションをサポートします。しかし、これはアンドロイドでは機能しません。
3.2vmax = 3.2vwまたは3.2vhの大きい方
body
{
font-size: 3.2vw;
}
参照css-tricks.com /を....とも見て.... caniuse.com /
メディアクエリを使用しますが、いくつかのブレークポイントにフォントサイズが必要です
body
{
font-size: 22px;
}
h1
{
font-size:44px;
}
@media (min-width: 768px)
{
body
{
font-size: 17px;
}
h1
{
font-size:24px;
}
}
％またはremの寸法を使用します。基本フォントサイズを変更するだけで、すべてが変わります。以前のものとは異なり、毎回h1ではなく本文のフォントを変更するか、ベースのフォントサイズをデバイスのデフォルトに設定してすべてemに残すことができます。
「rootems」（rem）：「rem」はスケーラブルなユニットです。1remはbody / htmlのフォントサイズに等しくなります。たとえば、ドキュメントのフォントサイズが12ptの場合、1emは12ptに等しくなります。ルートEmは本質的にスケーラブルであるため、2emは24ptに等しく、.5emは6ptに等しいなどです。
パーセント（％）：パーセントの単位は「em」の単位によく似ていますが、いくつかの基本的な違いがあります。何よりもまず、現在のフォントサイズは100％に等しい（つまり、12pt = 100％）。パーセント単位を使用している間、テキストはモバイルデバイスとアクセシビリティのために完全にスケーラブルなままです。
kyleschaeffer.com / ...を参照してください。
emは、コンテナのフォントサイズを基準にしています。これにより、コンテナのフォントサイズも設定されている場合に予期しない動作が発生する可能性がありemます...ドキュメントフォントに対する相対的なサイズを取得するには、を使用しますrem。
私は素晴らしいJSソリューションを開発しました-これは完全にレスポンシブなHTML（つまりパーセンテージで構築されたHTML）に適しています
フォントサイズの定義には「em」のみを使用します。
htmlフォントサイズは10ピクセルに設定されています。
html {
font-size: 100%;
font-size: 62.5%;
}
ドキュメント対応でフォントサイズ変更関数を呼び出します。
//これにはJQueryが必要です
function doResize() {
// FONT SIZE
var ww = $('body').width();
var maxW = [your design max-width here];
ww = Math.min(ww, maxW);
var fw = ww*(10/maxW);
var fpc = fw*100/16;
var fpc = Math.round(fpc*100)/100;
$('html').css('font-size',fpc+'%');
}
あなたはこのツールを試すかもしれません：http：//fittextjs.com/
私はこの2番目のツールを使用していませんが、似ているようです：https：//github.com/zachleat/BigText
なぜこれが複雑なのかわかりません。私はこの基本的なJavaScriptを実行します
<body onresize='document.getElementsByTagName("body")[0].style[ "font-size" ] = document.body.clientWidth*(12/1280) + "px";'>
ここで、12は1280の解像度で12pxを意味します。ここで必要な値を決定します
これは私のために働いた：
body {
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum
viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}
ここで詳細に説明されています：https： //css-tricks.com/books/volume-i/scale-typography-screen-size/
https://stackoverflow.com/a/17845473/189411のバリアントを作成しました
ここで、「チェック」サイズにするボックスの最小サイズと最大サイズに関連して、最小テキストサイズと最大テキストサイズを設定できます。さらに、テキストサイズを適用するボックスとは異なるdom要素のサイズを確認できます。
＃size-2要素の幅500pxと960pxに基づいて、＃size-2要素のテキストのサイズを19pxから25pxに変更します
resizeTextInRange(500,960,19,25,'#size-2');
ボディ要素の幅500pxと960pxに基づいて、＃size-1要素のテキストのサイズを13pxから20pxに変更します
resizeTextInRange(500,960,13,20,'#size-1','body');
完全なコードはhttps://github.com/kiuz/sandbox-html-js-css/tree/gh-pages/text-resize-in-range-of-text-and-screen/srcにあります
function inRange (x,min,max) {
return Math.min(Math.max(x, min), max);
}
function resizeTextInRange(minW,maxW,textMinS,textMaxS, elementApply, elementCheck=0) {
if(elementCheck==0){elementCheck=elementApply;}
var ww = $(elementCheck).width();
var difW = maxW-minW;
var difT = textMaxS- textMinS;
var rapW = (ww-minW);
var out=(difT/100)*(rapW/(difW/100))+textMinS;
var normalizedOut = inRange(out, textMinS, textMaxS);
$(elementApply).css('font-size',normalizedOut+'px');
console.log(normalizedOut);
}
$(function () {
resizeTextInRange(500,960,19,25,'#size-2');
resizeTextInRange(500,960,13,20,'#size-1','body');
$(window).resize(function () {
resizeTextInRange(500,960,19,25,'#size-2');
resizeTextInRange(500,960,13,20,'#size-1','body');
});
});
メディアクエリを使用しないと、フォントサイズを徐々に拡大できるので便利です。
vw単位を使用すると、ビューポートサイズを基準にしてフォントサイズが調整されます。
vw単位をフォントサイズに直接変換すると、モバイル解像度とデスクトップの両方のスイートスポットに到達するのが難しくなります。
次のようなものを試すことをお勧めします。
body {
font-size: calc(0.5em + 1vw);
}
クレジット：CSS In Depth
<script>
function getFontsByScreenWidth(actuallFontSize, maxScreenWidth){
return (actualFontSize / maxScreenWidth) * window.innerWidth;
}
// Example:
fontSize = 18;
maxScreenWidth = 1080;
fontSize = getFontsByScreenWidth(fontSize, maxScreenWidth)
</script>
これがお役に立てば幸いです。私はフェーズゲームにこの式を使用しています。
<meta name="viewport" content="width=device-width" />また、より「応答性の高い」感触のためにmax-width代わりに使用することもできますmax-device-width。