Medienabfrage reagiert nicht

-1

OK, so habe ich eine Medienabfrage für einige Zeit nicht verwendet, aber ich glaube, ich habe es richtig gemacht. Ich benutze nicht Sass oder weniger einfach nur alte CSS.Medienabfrage reagiert nicht

.btn-test { 
    border-radius: 2px; 
    border: 1px solid #2e70a4; 
    color: #fff; 
    font-size: 12px; 
    background: #2c83c9; 
    position: relative; 
    transition: all .2s ease; 
    display: inline-block; 
    text-decoration: none; 
    margin: 18px 9px 0 0; 
    padding: 5px 9px 0 9px; 
    height: 37px; 
    line-height: 16px; 
    text-align: center; 
} 


@media only screen 
and (min-device-width: 850px) 
and (max-device-width: 1050px) 
{ 
    .btn-test { 
     line-height: 34px; 
     font-size: 8px; 
    } 

    .arrow-call-to-action { 
     font-size: 8px; 
    } 

    .call-to-action-list p { 
     font-size: 8px; 
    } 
}

so stelle ich meinen Bildschirm zu 900, wo die Medienabfrage aktiv sein soll, jedoch sehe ich keine Änderung, habe ich das richtig gemacht?

Danke.

UPDATE HTML ADDED

<li> 
       <div class="t4 arrow-call-to-action"> 
        somthing 
       </div> 

       <div class="t5"> 
        <p>text 
         <br>more text<br> 
        </p> 
       </div> 

       <div class="t6"> 
        <a href="#" class="btn-test" 
         id="some-tracking-id">Buy Now 
        </a> 
       </div> 
      </li>

Quelle

2016-07-11 Beep

zeigen uns den HTML-Teil sowie ein Beispiel, was Sie jede Geige oder HTML-Seite komplett –

Np verwenden, kann ich in der HTML- – Beep

'Gerät hinzufügen -width' mit den Modifikatoren 'min' und' max' sind veraltet und sollten nicht mehr verwendet werden. Verwenden Sie stattdessen 'width' (' max-width' und 'min-width'). https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width –

Verwenden min-width und max-width wenn Sie mit dem Ändern der Größe des Browserfensters zu testen. Min-device-width ist von der Größenänderung nicht betroffen, da das Gerät die Größe nicht ändert.

Quelle

2016-07-11 10:41:17 grateful

Danke, perfekt, wusste nicht, das veraltete Update – Beep

Versuchen Sie, diese

@media (min-width: 850px) and (max-width: 1050px){}

Quelle

2016-07-11 10:41:47

plus 1, aber ich fürchte, dankbar war zuerst – Beep

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <!-- Latest compiled and minified CSS --> 

<!-- Optional theme --> 

<!-- Latest compiled and minified JavaScript --> 

<style> 
.btn-test { 
    border-radius: 2px; 
    border: 1px solid #2e70a4; 
    color: #fff; 
    font-size: 12px; 
    background: #2c83c9; 
    position: relative; 
    transition: all .2s ease; 
    display: inline-block; 
    text-decoration: none; 
    margin: 18px 9px 0 0; 
    padding: 5px 9px 0 9px; 
    height: 37px; 
    line-height: 16px; 
    text-align: center; 
} 


@media only screen and (min-width:850px) and (max-width: 1050px) { 
    .btn-test { 
     line-height: 34px; 
     font-size: 8px; 
     background: #fc9; 
    } 

    .arrow-call-to-action { 
     font-size: 8px; 
    } 

    .call-to-action-list p { 
     font-size: 8px; 
    } 
} 
</style> 

</head> 
<body> 
    <div class="container"> 
    <ul class="" role="tablist"> 
     <li> 
       <div class="t4 arrow-call-to-action"> 
        somthing 
       </div> 

       <div class="t5"> 
        <p>text 
         <br>more text<br> 
        </p> 
       </div> 

       <div class="t6"> 
        <a href="#" class="btn-test" 
         id="some-tracking-id">Buy Now 
        </a> 
       </div> 
      </li> 
    </ul> 
</div> 
<script> 
</script> 
</body> 
</html>

Quelle

2016-07-11 10:50:41

und die Reihenfolge des Ladens ist auch bevorzugt –

Antwort

Verwandte Themen