0

テキストのサイズ変更に問題があります。説明のために画像をアップロードしました。 ここに画像の説明を入力 問題は。大きなボックスは、画像を含む小さな div (小さなボックス) がある親 div です。大きな div の残りの部分は、テキスト (赤/ピンクの線) で埋める必要があります。テキストは段落 ( <p> .... </p> <p> .... </p>) でフォーマットされており、テキスト内にいくつかのリンクがあります。

div のサイズは動的で、ウィンドウのサイズが変わると変化します。そのため、メインの div に合わせてフォント サイズを変更したいと考えています。解決策はありますか？とても感謝しております。

これは私のhtmlコードです 

<div id="taust" align="justify">

<img src="images/1.png" width="30%" height="auto" alt="1" id="top_foto">
<img src="images/A.png" width="auto" height="15%">

<p> text </p>
<p> text </p>
<p> text </p>
<p>text <a href="link" target="_blank">Link</a>!</p>

</div>

これは私のcssコードです

@charset "utf-8";
/* CSS Document */

html, body, div, a, p {
}
html { 
    background: url(background/bg_image2_sx.jpg) no-repeat; 
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    background-size: cover;
    position: relative;
    min-width: 911px;
    min-height: 500px;
    font-size: 100%;
}

body {
    font-family:"Franklin Gothic Medium","Arial Narrow Bold",Arial,sans-serif;
}

#taust {  
    background-image:url(images/taust.png);
    width: 88%;
    height: 87%;
    position: absolute;
    top: 5%;
    left: 5%;
    min-height:435px;
    min-width:802px;
    border: 1px solid #CCC;
    padding: 1%;
}

@font-face { font-family: riesling; src: url('font/riesling.TTF');
}

a {
    color: #CCC;
    text-decoration: underline;
    font-size:0.95em;
    line-height: 1.4em;
    font-family:"Franklin Gothic Medium","Arial Narrow Bold",Arial,sans-serif;
}

p {
    line-height: 1.4em;
    font-size: 0.95em;
    color:#CCC;
    margin: 0 0 6px 0;
    font-family:"Franklin Gothic Medium","Arial Narrow Bold",Arial,sans-serif;
}

#top_foto {
    float: left;
    margin: 0 1.2% 1.2% 0;
    border: solid 1px #CCC;
}
4

3 に答える 3

3

cssで位置が絶対に設定されているため、divがすべてのテキストをカバーするように拡張されていません。以下のCSSを編集しました。

#taust {  /* Avalehe taustaks must kast */
    background-color: #CCC;
    width: 88%;
    height: 87%;
    position: relative;
    top: 5%;
    left: 5%;
    border: 1px solid #000000;
    padding: 1%;
}​

DIV を特定のサイズにしたいが、その中でフォントを制限したい場合は、サイト全体でパーセンテージなどの相対単位を使用する必要があります。そうしないと、特定の画面サイズで div の外に流れないテキストのサイズを把握しようとして、試行錯誤を繰り返すことになると思います。

于 2012-10-13T01:56:53.950 に答える
1

同様の質問からのこの回答は、あなたの質問に答えているようです：

私はこれを自分でしなければなりませんでした。私がしたことは、本文の基本テキスト サイズと、他のすべてのサイズのパーセンテージを設定することでした。次に、単純な jQuery スクリプトを使用して、ウィンドウのサイズ変更の基本サイズを変更しました。他のサイズも同様に更新されます。私はこのようなものを使用しました：

$(function() {
     $(window).bind('resize', function() {
         resizeMe();
     }).trigger('resize');
});

そしてresizeMe-functionでは、私はこれを持っていました:

//Standard height, for which the body font size is correct var
preferredHeight = 768;  

var displayHeight = $(window).height(); 
var percentage = displayHeight / preferredHeight;
var newFontSize = Math.floor(fontsize * percentage) > - 1;
$("body").css("font-size", newFontSize);

参照:ウィンドウのサイズ変更時にテキストのサイズ (フォント サイズ) を自動変更しますか?

編集：

jQuery をコードに追加するには、次の手順を実行します。

jQuery ライブラリを参照する必要があります。</body>通常、ページの終了タグの直前に行いindex.htmlます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

これは Google がホストするもので、最速かつ最小です。ライブラリをダウンロードして js フォルダーに配置し、上記と同じように参照することもできますが、ファイルへの相対リンクを使用します。

次に、上記のスクリプトの下と終了</body>タグの上に jQuery コードを貼り付けると、機能するはずです。別のファイルにコードを配置して、index.html ページの本文セクションの下部にリンクすることもできます。

于 2012-10-10T19:03:02.457 に答える
0

メディア クエリを使用して動的にサイズ変更するか、VH、VW (相対単位) を使用しますが、現在 Chrome と IE9/10 でサポートされています。

于 2012-10-10T19:11:36.790 に答える