CSSを使って条件付きでパディングを調整する方法は？

Question

私はパッディングが中と上の画面の上部に調整されたロゴjpegを持っているマテリアライズCSSを使用しています。モバイル画面では、左パッドを調整する必要があります。

媒体としては、最大私は小さく、下の画面に同じimgタグを使用して、このCSSスタイル

#mylogo { 
    padding-top: 15px; 
} 

とhtml

<div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo"> 
    <img src="images/logo.jpeg" id="mylogo" alt="Logo"> 
    My Logo 
    </a> 
</div> 

を持っています。私が追加したり変更したりする必要がありますか？

Answer 1

をご利用ください。

materializecssは3種類の画面サイズ（タブレットの場合は< = 600px、デスクトップの場合は< = 992px、それ以外の場合は> 992px）を使用していることを考慮すると、タブレットデバイスのルールのみを提供する必要があります。ただ、パディング左を追加

@media (max-width: 600px) { 
    #mylogo{ 
     padding-left: 15px; 
    } 
} 

@media (min-width: 601px) { 
    #mylogo{ 
     padding-top: 15px; 
     padding-left:0; 
    } 
} 

Answer 2

メディアクエリを追加します。

@media screen and (max-width: 480px) { 
    #mylogo { 
     padding-left: 10px; 
    } 
} 

@media screen and (min-width: 481px) { 
    #mylogo { 
     padding-left: 0; 
     padding-top: 15px; 
    } 
} 

480pxまでの画面で（これを調整することができます）、左にパディングが追加されます。デバイスが少なくとも481ピクセルの場合、イメージのパディングは0にリセットされ、パディングトップは15ピクセルに割り当てられます。

ご覧のとおり、min-widthとmax-widthという2つの異なる条件を使用できます。利用可能なその他の情報を確認するには、http://www.w3schools.com/cssref/css3_pr_mediaquery.asp