2017-07-20 5 views
1

現在、ウェブサイトを作成しようとしています。私は自分のコードにCSSのスタイリングをして、それはノートパソコンの画面のデバイスでうまく動作します。しかし、私はそれも同様に電話で素敵に見えるようにしたい。どうすれば私のdivコンテナボックス(テキストが入っている)が画面のサイズを変更したときにサイズを変更しないようにすることができますか?つまり、左下に収縮するのではなく、下に行くだけです。画面のサイズが変更されたときにdivボックスとその内部のテキストを全面に表示しようとしていません

+3

コミュニティがよりよく役立つためには、コードの例を含めてください。 – Trent

答えて

2

表またはdivを宣言すると、画面に収まるようにpx ではなく%が使用されます。

と責任あるWebページのためのブートストラップに使用する最初のIのアドバイスで

0

それの内部DIV /テーブルの内容の滞在をするために、CSSのオーバーフロー/ wordbreakを使用しています。 あなたのやり方では、pxではなく%のwithを使用する必要があります。さらに、auto、hight:autoを作成するにはhightが必要です。 CSSで。またjqueryを知っている場合は、ウィンドウのサイズを変更した場合にフォントサイズを変更したり、divの幅を変更することができます。あなたはこのようにすることができ

$(document).ready(function() { 
 
    $(window).resize(function() { 
 
    var w = $(window).width(); 
 
    if(w < 1280) { 
 
     $('.yourDiv').css('width', '75%'); 
 
    } if else (w < 1024) { 
 
     $('.yourDiv').css('width', '100%'); 
 
    } else { 
 
     $('.yourDiv').css('width', '50%'); 
 
    } 
 
    } 
 
})
.yourDiv { 
 
    width: 50%; 
 
    height: auto; 
 
}
<div class="yourDiv"> 
 
    <p>Your Text...</p> 
 
</div>

+0

CSSの '@media'クエリを使って幅のパーセンテージとフォントサイズを変更することができます。これを行うにはjavascript/jqueryは必要ありません。 –