メディアクエリが応答しない

-1

OKですので、私はしばらくの間はメディアクエリを使用していませんが、正しく行ったと思います。私は草を使用していないか、まれに単純な古いCSSを使用していません。メディアクエリが応答しない

.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; 
    } 
}

はので、私はメディアクエリがアクティブである必要があり900に自分の画面を設定し、しかし、私は何の変化も見られない、私はこれを正しく行っていますか？

ありがとうございました。あなたは、ブラウザウィンドウのサイズを変更することでテストする場合

UPDATE HTMLを使用min-widthとmax-width

<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>

出典

2016-07-11 Beep

あなたは私がHTML –

Npの任意のフィドルやHTMLページを使用している私たちのHTML部分だけでなく、一例を示して試してみてください修飾子 'min'と' max'をつけた-width'は推奨されておらず、より多く使うべきではありません。代わりに 'width'を使います（' max-width'と 'min-width'）。 https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width – Beep

'デバイスに追加することができ、完全な –

を追加しました。デバイスがサイズを変更していないため、Min-device-widthはサイズ変更の影響を受けません。

出典

2016-07-11 10:41:17 grateful

ありがとう、完璧、廃止されたアップデート – Beep

この

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

出典

2016-07-11 10:41:47

プラス1を知りませんでしたが、私は最初に – 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>

出典

2016-07-11 10:50:41

感謝しており、読み込みの順序も好む –

メディアクエリが応答しない

答えて

関連する問題