すべてのデバイスでテキストのサイズを変更するにはどうすればよいですか？

すべてのデバイスでテキストのサイズを変更したい。私は私のPC上で表示したときにそれはよさそうだが、私は自分の携帯電話でそれを見るとき、それはボックスにフィットし、ボタンと重ならないすべてのデバイスでテキストのサイズを変更するにはどうすればよいですか？

の上方および下方

ここに私のコードは

.container-profile { 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
.image { 
 
    display: block; 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 
.overlay-profile { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    opacity: 0; 
 
    transition: .5s ease; 
 
    background-color: #008CBA; 
 
} 
 

 
.container-profile :hover .overlay-profile { 
 
    opacity: 1; 
 
} 
 

 
.text { 
 
    color: white; 
 
    font-size: auto; 
 
    position: inherit; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    text-transform: translate(-50%, -50%); 
 
}

<div class="wrapper bgded; container-profile"> 
 
    <div class="container-profile"> 
 
    <img src="https://www.kent.ac.uk/sportsciences/employability/images/image-pending.png" alt="Avatar" class="image"> 
 
    <div class="overlay-profile"> 
 
     <div class="text"> 
 
     <p class="text-justify">SCORE (Standing Commitee on Research Exchange) merupakan Organisasi berbentuk Badan Semi Otonom, bersifat Independent dan berstatus sebagai satu-satunya organisasi penelitian mahasiswa Fakultas Kedoktean Universitas Sumatera Utara yang bergerak 
 
      di bidang penelitian dan kelimiahan. Berdiri pada tanggal 19 Agustus 2003 dan berkedudukan di Medan, Kampus FK USU. Semenjak berdiri, SCORE bertujuan untuk mewujudkan dan menumbuhkan budaya ilmiah di lingkungan Kampus Fakultas Kedoktean Universitas 
 
      Sumatera Utara. SCORE tergabung dalam Badan Analisis dan Pengembangan Ilmiah Nasional Ikatan Senat Mahasiswa Kedokteran Indonesia (BAPIN ISMKI).</p> 
 
     <br> 
 
     <p style="font-style: italic; text-align: center;">Scripta Manent Verba Volent <br> "Yang tertulis akan abadi, dan yang terkatakan akan binasa"</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

です

例

出典

2017-09-16 Raynald Pradigo

ブートストラップのグリッドレイアウトを使用して、さまざまなサイズのデバイスでエレメントが取ることができるスペースを設定することを検討してください。 https://v4-alpha.getbootstrap.com/layout/grid/。また、要素のスペースを確保するために、flexboxを試すこともできます。オンラインで利用できるチュートリアルの数と両方を一緒に使用できます。 – RafatMunshi

ルート（html）にデフォルトの 'font-size'を設定すると' mediaクエリ 'の各ブレークポイントで' rem'の他のフォントサイズがルートの 'font-size'と' remはrootに関連して変更されます。これは完璧な解決策とはかけ離れています（したがってコメントです）。あなたの助言に感謝します。 – zer00ne

だけViewport-percentage

ビューポート-パーセント値と遊ぶためにいくつかの時間を費やすことです。

vw（ビューポート幅）
vh（ビューポートの高さ）
vi（ビューポートサイズの1％）ルート要素のインライン軸の方向に
vb（ルート要素のブロック軸方向のビューポートのサイズの1％）
vmin（vw又はvhの小さい）
vmax（大きいです
：またはvwまたはvh）が

は、あなたがこのようvwを使用する場合は、あなたの問題を解決することを願っています

出典

2017-09-16 05:31:30 alamin

それは私が新しい1 '' 'font-size'を追加したときに解決します –

嬉しいです:) – alamin

のClick hereだけ

のようなあなたのHTMLファイルにメタデータを追加する必要があります

これは、デバイスのフォントサイズを調整します。

出典

2017-09-16 05:15:33 Nitheesh

メディアクエリーを使用して、使用しているデバイスに合わせてさまざまなサイズのフォントを取得できます。

more about media queries

出典

2017-09-16 05:15:50 sinthu225

.logoHeader div height autoを設定します。

.logoHeader{ 
    height: auto; 
    min-height: 120px; 
}

これは問題ではありません。 NitheeshとAl Aminの答えをチェックすることができます。

出典

2017-09-16 06:03:52

すべてのデバイスでテキストのサイズを変更するにはどうすればよいですか？

答えて

関連する問題