コンテナの幅に基づくフォントの拡大縮小
フォントの拡大縮小に頭を悩ませるのに苦労しています。
私は現在持っています このサイト 100％のボディfont-size。 100％何だろう？これは16pxで計算されるようです。
私は100％がどういうわけかブラウザウィンドウのサイズを参照するだろうという印象の下にありました、しかしそれはウィンドウがモバイルの幅または本格的なワイドスクリーンデスクトップに縮小されるかどうか常に16pxだからではありません。
自分のサイト上のテキストをそのコンテナーに合わせて拡大縮小するにはどうすればよいですか。私はemを使用してみましたが、これも拡大縮小できません。
私の考えはあなたがリサイズするとき私のメニューのようなものが押しつぶされるようになるので、私はコンテナの幅に関連して他の要素の中でfont-sizeのpx .menuItemを減らす必要があります。 （例えば、大きなデスクトップのメニューでは、22pxは完璧に機能します。タブレットの幅に移動すると、16pxがより適切です。）
ブレークポイントを追加できることは承知していますが、余分なブレークポイントがあるようにテキストを適切に拡大縮小したい場合は、100 pxの幅を狭めるごとに数百のブレークポイントを設定してテキストを制御します。
編集：コンテナが本体ではない場合 CSSトリックはあなたのオプションすべてをここでカバーします： https://css-tricks.com/fitting-text-to-a-container/
コンテナーが本体の場合、探しているのは ビューポートパーセントの長さ ：
ビューポートパーセンテージの長さ は、 初期包含ブロック のサイズに比例します。最初の包含ブロックの高さまたは幅が変更されると、それに応じて拡大縮小されます。ただし、ルート要素のoverflowの値がautoの場合、スクロールバーは存在しないと見なされます。
値は以下のとおりです。
vw（ビューポート幅の％）vh（ビューポートの高さの％）vi（ルート要素のインライン軸方向のビューポートサイズの1％）vb（ルート要素のブロック軸方向のビューポートサイズの1％）vmin（vwまたはvhのうち小さい方）vmax（より大きい、vwまたはvh）
1 v *は最初の包含ブロックの1％に等しい。
それを使用すると、このようになります。
p {
font-size: 4vw;
}
ご覧のとおり、ビューポートの幅が広がると、メディアクエリを使用する必要なしにフォントサイズも大きくなります。
これらの値はpxやemと同じようにサイズの単位であるため、幅、マージン、パディングなど、他の要素のサイズ変更にも使用できます。
ブラウザのサポートはかなり優れていますが、おそらく次のようなフォールバックが必要になるでしょう。
p {
font-size: 16px;
font-size: 4vw;
}
サポート統計をチェックしてください： http://caniuse.com/#feat=viewport-units 。
また、CSS-Tricksを見ればもっと見やすくなります： http://css-tricks.com/viewport-sized-typography/ /
これが最小/最大サイズの設定とサイズをもう少し制御することについてのいい記事です： http://madebymike.com.au/writing/precise-control-responsive-typography/ /
テキストがビューポートを埋めるようにcalc（）を使用してサイズを設定する方法についての記事があります。 http://codepen.io/CrocoDillon/pen/fBJxu
また、この記事を見てください。この記事では、同様に行の高さを調整するために「メルトリーディング」と呼ばれる手法を使用しています。 https://css-tricks.com/molten-leading-css/
しかし、コンテナーがビューポート（本体）ではない場合はどうなりますか？
この質問は承認された答えの下でアレックスによってコメントされています。
その事実は、vwがそのコンテナのサイズにある程度使用できないことを意味するのではありません。少しでもバリエーションを見るためには、コンテナのサイズが柔軟であると仮定しなければなりません。直接の割合widthによるものか、100％マイナスマージンによるものか。コンテナが常に200px wideに設定されている場合、ポイントは "moot"になります - そしてその幅に対応するfont-sizeを設定するだけです。
例1
ただし、幅が可変のコンテナでは、何らかの方法でコンテナがビューポートから外れたサイズになっているであることを理解する必要があります。そのため、ビューポートに対するサイズのパーセンテージの違いに基づいてvw設定を調整することが問題になります。これは、親ラッパーのサイズ変更を考慮に入れることを意味します。 この例を取る ：
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
So if the container is 50% of viewport (as here)
then factor that into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
*/
font-size: 2.5vw;
}
ここでdivがbodyの子であると仮定すると、それはその50%幅の100%であり、これはこの基本的な場合のビューポートサイズです。基本的に、あなたはあなたにとって見栄えがしそうなvwを設定したいです。上記のCSSの私のコメントからわかるように、ビューポート全体のサイズに関して数学的にそれを「考える」ことができますが、それを行うために必要を使うことはできません。コンテナーはビューポートのサイズ変更に合わせて曲がっているため、テキストはコンテナーに合わせて「曲がる」ことになります。更新： これは2つの異なるサイズのコンテナの例です 。
例2
それに基づいて計算を強制することで、ビューポートのサイズ変更を確実にするのに役立ちます。 この例を考えます ：
html {width: 100%;} /* force html to be viewport width */
body {width: 150%; } /* overflow the body */
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
Here, the body is 150% of viewport, but the container is 50%
of viewport, so both parents factor into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 3.75vw
(5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
*/
font-size: 3.75vw;
}
サイズ設定はまだビューポートに基づいていますが、本質的にはコンテナサイズ自体に基づいて設定されています。
コンテナのサイズを動的に変更する必要があります...
コンテナ要素のサイズ変更が@mediaブレークポイントまたはJavaScriptを介して動的にパーセンテージの関係を変更することになった場合、基本の「ターゲット」がテキストサイズ変更のために同じ「関係」を維持するために再計算が必要になります。
上記の例1を取りなさい。 divが25%またはjavascriptのいずれかによって@media幅に切り替えられた場合、同時に、font-sizeはメディアクエリーまたはjavascriptのいずれかで新しい5vw * .25 = 1.25の計算に合わせて調整する必要があります。これはテキストサイズを元の50%コンテナの "幅"がビューポートのサイズ変更から半分になったのと同じサイズにしますが、それ自身のパーセンテージ計算の変更のために現在は縮小されています。
挑戦
CSS3 calc()関数 が使用されていると、この関数は現時点ではfont-sizeの目的では機能しないため、動的に調整することが難しくなります。そのため、幅がcalc()で変更されている場合は、純粋なCSS3調整はできません。もちろん、マージンの幅を微調整してもfont-sizeの変更を保証するのに十分ではない場合があるので、問題にはならないかもしれません。
私のプロジェクトの1つで私がしていることは私のニーズに合わせてフォントサイズを調整するためにvwとvhの間の "混合"です。例えば：
font-size: calc(3vw + 3vh);
私はこれがopの質問に答えないことを知っています、しかし多分それは他の誰かへの解決策になることができます。
SVGによる解決策：
<div style="width: 60px;">
<svg width="100%" height="100%" viewBox="0 -200 1000 300"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text font-size="300" fill="black">Text</text>
</svg>
</div>
この問題には大きな哲学があります。 最も簡単なことは、特定のフォントサイズをbodyに指定することです（私は10を推奨します）。それから他のすべての要素のフォントはemまたはremになります。それらを理解するためのあなたと例を挙げなさい。
body{font-size:10px;}
.menu{font-size:2em;} /* that means 2*10px = 20px */
.menu li{font-size:1.5em;} /* that means 1.5*20px = 30px */
Remは常に体に相対的です
body{font-size:10px;}
.menu{font-size:2rem;} /* that means 2*10px = 20px */
.menu li{font-size:1.5rem;} /* that means 1.5*10px = 15px */
そして、あなたはあなたのコンテナの幅に合わせてフォントサイズを変更するスクリプトを作成することができました。しかし、これは私が推薦するものではありません。たとえば、幅900ピクセルのコンテナでは、フォントサイズが12ピクセルのp要素があるとします。そしてあなたのアイデアでは4pxフォントサイズで300px幅のコンテナになるでしょう。下限を設定する必要があります。別の解決策は、メディアクエリを使用することです。そのため、フォントをさまざまな幅に設定できます。
しかし、私がお勧めする解決策はそれを手助けするJavaScriptライブラリを使用することです。そして fittext.js 私がこれまでに見つけたこと。
私は投票権があるので更新しました。
これが関数です：
document.body.setScaledFont = function(f) {
var s = this.offsetWidth, fs = s * f;
this.style.fontSize = fs + '%';
return this
};
それから、あなたのすべての文書の子要素のフォントサイズをemまたは％に変換してください。
次に、このようなコードをコードに追加してベースフォントサイズを設定します。
document.body.setScaledFont(0.35);
window.onresize = function() {
document.body.setScaledFont(0.35);
}
calc()、CSSユニット、数学による純粋なCSSソリューション
これはまさしくOPが求めるものではありませんが、誰かの日になるかもしれません。この答えはスプーンで送るのは簡単ではなく、開発者側で何らかの調査が必要です。
私はついに異なる単位でcalc()を使ってこれのための純粋なCSSソリューションを得るようになりました。 calc()の式を解くには、数式についての基本的な数学的理解が必要です。
私がこれを解決したとき、私はDOMのいくつかの親をいくつか追加して全ページ幅のレスポンシブヘッダーを取得する必要がありました。ここでは自分の値を使用します。自分の値に置き換えてください。
数学へ
必要になるだろう：
- いくつかのビューポートでうまく調整された比率、私は320pxを使った、従って私は24pxの高さと224pxの幅を持っていたので比率は9.333 ...または28/3である
- コンテナの幅、私は
padding: 3emと全幅なのでこれは100wv - 2 * 3emになりました
Xはコンテナの幅なので、それをあなた自身の表現に置き換えるか、全ページテキストを得るために値を調整してください。 Rはあなたが持つことになる比率です。いくつかのビューポートで値を調整し、要素の幅と高さを調べて自分の値に置き換えることでそれを得ることができます。また、それはwidth / heigth;です
x = 100vw - 2 * 3em = 100vw - 6em
r = 224px/24px = 9.333... = 28 / 3
y = x / r
= (100vw - 6em) / (28 / 3)
= (100vw - 6em) * 3 / 28
= (300vw - 18em) / 28
= (75vw - 4.5rem) / 7
そして強打！出来た！私が書いた
font-size: calc((75vw - 4.5rem) / 7)
私のヘッダにそれはすべてのビューポートでうまく調整しました。
しかし、それはどのように機能しますか？
ここにいくつか定数が必要です。 100vwはビューポートの全幅を意味します、そして私の目標はいくらかのパディングで全幅ヘッダを確立することでした。
比率。あるビューポートで幅と高さを取得することで、私は一緒にプレイするための比率を得ました、そして比率で私は他のビューポート幅で高さが何であるべきか知っています。手で計算するには時間がかかり、少なくとも多くの帯域幅が必要なので、良い答えではありません。
結論
私はなぜ誰もこれを考え出していないのだろうか、そして何人かの人々はこれがCSSをいじくり回すことは不可能であろうと言いさえしています。私は要素を調整するのにJavascriptを使うのが好きではないので、もっと深く掘り下げてJSやjQueryの答えさえも受け入れません。結局のところ、これが考え出されたことは良いことであり、これはWebサイトデザインにおける純粋なCSS実装への一歩です。
私は私のテキストの中のどんな異常な慣習もお詫び申し上げます、私は英語のネイティブスピーカーでもなく、そしてSO回答を書くことにまったく新しいものでもありません。
編集 ：ブラウザによっては邪悪なスクロールバーがあることにも注意してください。たとえば、Firefoxを使用しているとき、私は100vwがスクロールバーの下に広がるビューポートの全幅を意味することに気づきました。
JavaScriptなしでこれを実行する方法があります。
あなたはインラインSVGを使用することができます。インラインの場合は、svgでcssを使用できます。このメソッドを使うことはあなたのSVGがそのコンテナサイズに応答することを意味することを覚えておかなければなりません。
次の解決策を試してみてください。
HTML
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.96 358.98" >
<text>SAVE $500</text>
</svg>
</div>
CSS
div {
width: 50%; /* set your container width */
height: 50%; /* Set your container height */
}
svg {
width: 100%;
height: auto;
}
text {
transform: translate(40px, 202px);
font-size: 62px;
fill: #000;
}
例： https://jsfiddle.net/k8L4xLLa/32/
もっと派手なものが欲しい？
SVGでは、形やがらくたを使ってクールなことをすることもできます。スケーラブルなテキストのためのこの素晴らしいユースケースをチェックしてください...
これはあまり実用的ではないかもしれませんが、div/pageのサイズを読み取るために/ loop（interval）をリッスンするJSを持たずにfontを親の直接の関数にしたい場合は、それを行う方法があります。 iframe iframe内のものはすべて、iframeのサイズをビューポートのサイズと見なします。そのための秘訣は、幅をテキストにしたい最大幅で、高さが最大の高さ*特定のテキストの縦横比に等しいiframeを作成することです。
ビューポート単位がテキストの親単位と一緒になることはできないという制限を別にして（％sizeを他の人のように振る舞うように）、ビューポート単位は非常に強力なツールを提供します。最小/最大寸法を取得できること。あなたは他の場所でそれをすることはできません - あなたは言うことができません。
そうは言っても、トリックはvminを使用し、高さが制限寸法であるときには* total heightが適切なフォントサイズになるようにiframeサイズを設定し、幅が限界寸法高さが幅と縦横比の積でなければならないのはこのためです。
私の特定の例では、あなたは
.main iframe{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: calc(3.5 * 100%);
background: rgba(0,0,0,0);
border-style: none;
transform: translate3d(-50%,-50%,0);
}
この方法でちょっと煩わしいのは、iframeのCSSを手動で設定しなければならないということです。 CSSファイル全体を添付すると、多くのテキスト領域にかなりの帯域幅がかかります。だから、私がしたいのは私のCSSから直接欲しいルールを添付することです。
var rule = document.styleSheets[1].rules[4];
var iDoc = document.querySelector('iframe').contentDocument;
iDoc.styleSheets[0].insertRule(rule.cssText);
あなたは、CSSルール/テキスト領域に影響を与えるすべてのCSSルールを取得する小さな関数を書くことができます。
サイクリング/リスニングのJSを持っていなければ、他の方法を考えることはできません。本当の解決策は、ブラウザが親コンテナの機能としてテキストを拡大縮小する方法を提供し、同じvmin/vmaxタイプの機能も提供することです。
JSフィドル： https://jsfiddle.net/0jr7rrgm/3/ （マウスを赤い四角に固定するには1回クリックし、解放するにはもう一度クリックします）
フィドル内のJSの大部分は、私のカスタムクリックドラッグ機能です。
vw、em＆coを使う確かに機能しますが、imoは常に微調整のために人間の手が必要です。
これは私がちょうど@ tnt-rox ' answer に基づいて書いたスクリプトです。
$('#controller').click(function(){
$('h2').each(function(){
var
$el = $(this),
max = $el.get(0),
el = null
;
max =
max
? max.offsetWidth
: 320
;
$el.css({
'font-size': '1em',
'display': 'inline',
});
el = $el.get(0);
el.get_float = function(){
var
fs = 0
;
if (this.style && this.style.fontSize) {
fs = parseFloat(this.style.fontSize.replace( /([\d\.]+)em/g, '$1' ));
}
return fs;
};
el.bigger = function(){
this.style.fontSize = (this.get_float() +0.1) +'em';
};
while ( el.offsetWidth < max ) {
el.bigger();
}
// finishing touch.
$el.css({
'font-size': ((el.get_float() -0.1) +'em'),
'line-height': 'normal',
'display': '',
});
}); // end of ( each )
}); // end of ( font scaling test )div {
width: 50%;
background-color: tomato;
font-family: 'Arial';
}
h2 {
white-space: nowrap;
}
h2:nth-child(2) {
font-style: italic;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" id="controller" value="Apply" />
<div>
<h2>Lorem ipsum dolor</h2>
<h2>Test String</h2>
<h2>Sweet Concatenation</h2>
<h2>Font Scaling</h2>
</div>それは基本的にfont-sizeを1emに減らし、それからそれが最大幅に達するまで0.1ずつ増加し始めます。
このようなものを探していますか？ =>
http://jsfiddle.net/sijav/dGsC9/4/ /
http://fiddle.jshell.net/sijav/dGsC9/4/show/
flowtype を使用しましたが、うまく機能しています（ただしjsで純粋なCSSソリューションではありません）
$('body').flowtype({
minFont : 10,
maxFont : 40,
minimum : 500,
maximum : 1200,
fontRatio : 70
});
このWebコンポーネント は、内側のテキスト幅がコンテナの幅と一致するようにフォントサイズを変更します。 demo を確認してください。
あなたはこのようにそれを使うことができます：
<full-width-text>Lorem Ipsum</full-width-text>
100％は基本フォントサイズを基準にしています。設定していない場合は、ブラウザのユーザーエージェントのデフォルトになります。
効果を得るためにあなたは私がウィンドウの寸法に関連してベースフォントサイズを調整するためにjavascriptの一部を使うことになっています。
あなたのCSSの内側であなたのデザインが壊れ始めるところはどこでも320px幅を変えて一番下にこれを加えてみてください：
@media only screen and (max-width: 320px) {
body { font-size: 1em; }
}
それからあなたが望むように "px"か "em"でfont-sizeを与えなさい。
http://simplefocus.com/flowtype/ を試しましたか？
これは私が私のサイトに使用しているものであり、完璧に機能しています。それが役に立てば幸い。
私が開発したjQueryベースのソリューションは、コンテナの高さが大きくなるまでフォントサイズを徐々に大きくすることで機能します（つまり改行されます）。 。使用されているフォントについて何も知っている必要はありません。すべてがブラウザによって処理されます。
あなたはそれを/で遊ぶことができます http://jsfiddle.net/tubededentifrice/u5y15d0L/2/ /
魔法はここで起こります：
var setMaxTextSize=function(jElement) {
//Get and set the font size into data for reuse upon resize
var fontSize=parseInt(jElement.data(quickFitFontSizeData)) || parseInt(jElement.css("font-size"));
jElement.data(quickFitFontSizeData,fontSize);
//Gradually increase font size until the element gets a big increase in height (ie line break)
var i=0;
var previousHeight;
do
{
previousHeight=jElement.height();
jElement.css("font-size",""+(++fontSize)+"px");
}
while(i++<300 && jElement.height()-previousHeight<fontSize/2)
//Finally, go back before the increase in height and set the element as resized by adding quickFitSetClass
fontSize-=1;
jElement.addClass(quickFitSetClass).css("font-size",""+fontSize+"px");
return fontSize;
};
Font-sizeの代わりにcss変換を使った単純なスケール関数を用意しました。あなたはどんなコンテナの中でもそれを使うことができます、あなたはメディアクエリなどを設定する必要はありません:)
ブログ記事： https://blog.polarbits.co/2017/03/07/full-width-css-js-scalable-header/ /
コード：
function scaleHeader() {
var scalable = document.querySelectorAll('.scale--js');
var margin = 10;
for (var i = 0; i < scalable.length; i++) {
var scalableContainer = scalable[i].parentNode;
scalable[i].style.transform = 'scale(1)';
var scalableContainerWidth = scalableContainer.offsetWidth - margin;
var scalableWidth = scalable[i].offsetWidth;
scalable[i].style.transform = 'scale(' + scalableContainerWidth / scalableWidth + ')';
scalableContainer.style.height = scalable[i].getBoundingClientRect().height + 'px';
}
}
私の問題は似ていましたが、見出し内のテキストの拡大縮小に関連していました。私はFit Fontを試したが、Text Flowのように少し違った問題を解決していたので、結果を得るためにコンプレッサーを切り替える必要があった。だから私はあなたがoverflow: hiddenとwhite-space: nowrapを持っていると仮定して、コンテナに合うようにフォントサイズを減らす私自身の小さなプラグインを書きました。 。
(function($) {
// Reduces the size of text in the element to fit the parent.
$.fn.reduceTextSize = function(options) {
options = $.extend({
minFontSize: 10
}, options);
function checkWidth(em) {
var $em = $(em);
var oldPosition = $em.css('position');
$em.css('position', 'absolute');
var width = $em.width();
$em.css('position', oldPosition);
return width;
}
return this.each(function(){
var $this = $(this);
var $parent = $this.parent();
var prevFontSize;
while (checkWidth($this) > $parent.width()) {
var currentFontSize = parseInt($this.css('font-size').replace('px', ''));
// Stop looping if min font size reached, or font size did not change last iteration.
if (isNaN(currentFontSize) || currentFontSize <= options.minFontSize ||
prevFontSize && prevFontSize == currentFontSize) {
break;
}
prevFontSize = currentFontSize;
$this.css('font-size', (currentFontSize - 1) + 'px');
}
});
};
})(jQuery);
私のコードを見てください。font size smallerからfitになります。
しかし、これは優れたユーザーエクスペリエンスにはつながらないと思います
var containerWidth = $("#ui-id-2").width();
var items = $(".quickSearchAutocomplete .ui-menu-item");
var fontSize = 16;
items.each(function(){
//display value depend sometimes on your case you may make it block or inline-table instead of inline-block or whatever value that make the div take overflow width
$(this).css({"whiteSpace":"nowrap","display":"inline-block"});
while ($(this).width() > containerWidth){
console.log("$(this).width()"+ $(this).width() + "containerWidth" + containerWidth)
$(this).css("font-size", fontSize -= 0.5);
}
});
これがお役に立てば幸いです
これは私のために働いた：
Font-size：10pxの設定から得られる幅/高さに基づいて、font-sizeを概算しようとします。基本的には、「幅20ピクセル、高さ11ピクセルのフォントサイズが10ピクセルの場合、幅50ピクセル、高さ30ピクセルのコンテナを計算するのに最大のフォントサイズはどうなるのでしょうか」と考えます。
答えはダブルプロポーションシステムです。
{20：10 = 50：X、11：10 = 30：Y} = {X =（10 * 50）/ 20、Y =（10 * 30）/ 11}
これで、Xは幅に一致するフォントサイズになり、Yは高さに一致するフォントサイズになります。最小値をとる
function getMaxFontSizeApprox(el){
var fontSize = 10;
var p = el.parentNode;
var parent_h = p.offsetHeight ? p.offsetHeight : p.style.pixelHeight;
if(!parent_h)parent_h = 0;
var parent_w = p.offsetHeight ? p.offsetWidth : p.style.pixelWidth;
if(!parent_w)parent_w = 0;
el.style.fontSize = fontSize + "px";
var el_h = el.offsetHeight ? el.offsetHeight : el.style.pixelHeight;
if(!el_h)el_h = 0;
var el_w = el.offsetHeight ? el.offsetWidth : el.style.pixelWidth;
if(!el_w)el_w = 0;
//0.5 is the error on the measure that js does
//if real measure had been 12.49 px => js would have said 12px
//so we think about the worst case when could have, we add 0.5 to
//compensate the round error
var fs1 = (fontSize*(parent_w + 0.5))/(el_w + 0.5);
var fs2 = (fontSize*(parent_h) + 0.5)/(el_h + 0.5);
fontSize = Math.floor(Math.min(fs1,fs2));
el.style.fontSize = fontSize + "px";
return fontSize;
}
注意：関数の引数はspan要素か、親よりも小さい要素でなければなりません。そうでなければ、子と親の両方が同じwidth/height関数を持つ場合は失敗します。
JavaScriptのフォールバック（またはあなたの唯一の解決策）として、あなたはreferenceオプションを渡すことによって親要素（コンテナ）に比例してスケールすることを可能にするmy jQuery Scalemプラグイン を使うことができます。
動的テキストの場合、このプラグインは非常に便利です http://freqdec.github.io/slabText/ 。 cssを追加するだけです
.slabtexted .slabtext
{
display: -moz-inline-box;
display: inline-block;
white-space: nowrap;
}
.slabtextinactive .slabtext
{
display: inline;
white-space: normal;
font-size: 1em !important;
letter-spacing: inherit !important;
Word-spacing: inherit !important;
*letter-spacing: normal !important;
*Word-spacing: normal !important;
}
.slabtextdone .slabtext
{
display: block;
}
とスクリプト
$('#mydiv').slabText();
だれにでも役立つ場合、このスレッドの解決策のほとんどは、テキストを複数行に折り返すことでした。
しかし、それから私はこれを見つけました、そしてそれはうまくいきました：
https://github.com/chunksnbits/jquery-quickfit
使用例
$('.someText').quickfit({max:50,tolerance:.4})
fitText pluginを使用してみてください。ビューポートのサイズはこの問題の解決策ではないからです。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
テキストの係数を設定してフォントサイズを正しく変更します。
$("#text_div").fitText(0.8);
テキストの最大値と最小値を設定できます。
$("#text_div").fitText(0.8, { minFontSize: '12px', maxFontSize: '36px' });
この属性を持つ 要素 を常に持ってください。
Javascript：element.style.fontSize = "100%";
または
CSS：style = "font-size: 100%;"
全画面表示になると、 scale 変数がすでに計算されているはずです（scale> 1またはscale = 1）。そして、フルスクリーンで：
document.body.style.fontSize = (scale * 100) + "%";
それは小さなコードでうまく動作します。
CSS変数を使用する
まだCSS変数について言及している人はいません。この方法は私にとって最適な方法です。
モバイルユーザーの画面の幅の100％で、800ピクセルのmax-widthを持つ列がページにあるとしましょう。デスクトップでは、列の両側にスペースがあります。あなたのページの一番上にこれを置いてください：
<script> document.documentElement.style.setProperty('--column-width', Math.min(window.innerWidth, 800)+'px'); </script>
そして今、あなたはあなたのフォントのサイズを設定するために（組み込みのvwユニットの代わりに）その変数を使うことができます。例えば。
p {
font-size: calc( var(--column-width) / 100 );
}
これは pure CSSのアプローチではありませんが、かなり近いものです。
Font-sizeをそのコンテナに合わせるために、ウィンドウではなく私がこの質問で共有したresizeFont()関数を見てください（他の答えの組み合わせ、そのほとんどは既にここにリンクされています）。 window.addEventListener('resize', resizeFont);を使って起動されます。
Vanilla JS：コンテナに合うようにフォントのサイズを変更する
JS：
function resizeFont() {
var elements = document.getElementsByClassName('resize');
console.log(elements);
if (elements.length < 0) {
return;
}
_len = elements.length;
for (_i = 0; _i < _len; _i++) {
var el = elements[_i];
el.style.fontSize = "100%";
for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) {
el.style.fontSize = size + '%';
}
}
}
おそらくvw/vhをフォールバックとして使用できるので、javascriptを使用してemまたはremユニットを動的に割り当て、javascriptが無効になっている場合でもフォントがウィンドウに合わせて拡大縮小されるようにします。
拡大縮小したいテキストを含むすべての要素に.resizeクラスを適用します。
ウィンドウサイズ変更イベントリスナを追加する前に関数をトリガしてください。そのコンテナに合わないテキストは、ページがロードされたときやサイズ変更されたときに縮小されます。
注：正しい結果を得るには、デフォルトのfont-sizeをem、rem、または%に設定する必要があります。
CSSのflexプロパティを参照しても答えがわかりませんが、それも非常に便利です。
html
<div style="height:100px; width:200px;">
<div id='qwe'>
test
</div>
</div>
フォントサイズを最大化するjs
el = document.getElementById('qwe');
maxFontPixels = 50;
maxHeight = el.parentElement.offsetHeight;
fontSize = Number(maxFontPixels || maxHeight);
el.style.width = '100%';
el.style.overflowWrap = 'break-Word';
var minFS = 3, maxFS = fontSize;
while (fontSize != minFS) {
el.style.fontSize = `${fontSize}px`;
if (el.offsetHeight < maxHeight) {
minFS = fontSize;
} else{
maxFS = fontSize;
}
fontSize = Math.floor((minFS + maxFS)/2);
}
el.style.fontSize = `${minFS}px`;
メディアクエリをストレートアップすることは、動的なコンテナサイズに基づいてフォントのサイズを変更するための、はるかに単純でわかりやすい解決策のように思えます。
以下は、コンテナがビューポートのサイズに合わせて拡大縮小されているかどうか、または最大値に達しているかどうかにかかわらず、フォントをコンテナのサイズに変更します。幅が100％でないコンテナがある場合は、それに応じてvwを調整できます。
.container {
width: 100%;
max-width: 600px;
}
.headline {
font-size: 20vw;
}
.subhead {
font-size: 5vw;
}
@media (min-width:600px) {
.headline {
font-size: 120px;
}
.subhead {
font-size: 32px;
}
}
しかし、コンテナーがビューポート（本体）ではない場合はどうなりますか？
本当の答えはtransform propertyにあります。あなたは視覚的に要素を歪曲、回転、平行移動、拡大縮小することによって操作することができます