プロダクトカードの応答性を向上させる

Question

div内にコンテンツを作成する必要がありました。

私は、divのサイズのパーセンテージを使用すると、フォントサイズにEMを使用するか、responsive queriesを使用するかを選択することができました。私はquiresがこれのために最もよく働いたことがわかった。あなたは、私がコンテナの割合を使用しますがセクションのピクセルを述べていることがわかりますコードで

section { 
 
    width: 800px; 
 
    height: 600px; 
 
    background: #f5f5f5; 
 
    padding: 50px; 
 
} 
 

 
.container { 
 
    width: 30%; 
 
    height: 50%; 
 
    background: #fff; 
 
    margin: auto; 
 
    padding: 20px; 
 
} 
 

 
.background { 
 
    background: #f5f5f5; 
 
} 
 

 
.text h1 { 
 
    font-size: 24px; 
 
    color: #000; 
 
    font-family: 'open sans'; 
 
} 
 

 
.text p { 
 
    font-size: 16px; 
 
    color: #000; 
 
    font-family: 'open sans'; 
 
}

<section> 
 
    <div class=" container"> 
 
    <span class="background "></span> 
 
    <span class="gradient_bottom "></span> 
 
    <div class="overlay "> 
 
     <div class="text "> 
 
     <h1>Title</h1> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget dolor auctor, tempor nibh.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

、これはコンテナが幅を述べたセクションの80％であることを知っているそうです。

私はそれを減らすために必要なテキストのポイントについてメディアクエリを使用しました。以下の例を見ることができます。

@media only screen and (max-width: 500px) { 
.text h1 { 
    font-size: 18px; 
} 

}

Answer 1

ピクセルの測定値を使用しているため、表示されるサイズはディスプレイの実際のサイズではなく、コンテンツを表示する画面の解像度に依存します。コンテンツを画面サイズに応じて表示するには、ピクセル数ではなく、利用可能なスペースの量に応じてパーセンテージまたはその他のcss測定値を使用する必要があります。このコンテンツは、応答作る方法を学び始めるために

絶好の場所は、このリンクにありますhttps://www.w3schools.com/css/css_rwd_intro.asp

あなただけの割合の測定ではなく、ピクセルの測定を含める方法を求めている場合とは対照的に、あなたはwidth: 50%;使用しますwidth: 100px;など

また、レスポンシブウェブデザインを使用する場合は、ドキュメントのビューポートを設定することが重要です。あなたはこのスニペットでこれを行うことができます。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

ここでビューポートについて詳しく読む：https://www.w3schools.com/css/css_rwd_viewport.asp

あなたはまた、特定の画面サイズのため、特定のCSSルールを定義するCSSメディアクエリを使用することができます。スクリーンサイズが500px以下の場合、クラスsomeclassを持つすべての要素を50%の幅に設定するCSSルールの例を次に示します。

@media only screen and (max-width: 500px) { 
.someclass { 
    width: 50%; 
} 
} 

メディアクエリは非常に強力で、本当にあなたが画面解像度とサイズの範囲にわたる最良の外観のためにサイトを最適化を支援します。

ここではパーセンテージだけを使用するよりもはるかに多くのことがあるので、ここではレスポンシブウェブデザインのガイドを必ずお読みください。 https://www.w3schools.com/css/css_rwd_intro.asp

Answer 2

あなたはカードがどのともあなたはパーセンテージ幅と最小 - &最大幅を使用することができます間の「ストレッチ」のような最小幅と最大値を持つようにしたい場合。カードを最小200px、最大300pxにしておきたいとしましょう。残りはカードに与えられたパーセンテージ値から得られる魔法です。希望があなたの質問に答えることを望みます。