미디어 쿼리가 응답하지 않음

-1

그래, 언젠가는 미디어 쿼리를 사용하지 않았지만 제대로했다고 생각합니다. 나는 sass 이하를 사용하지 않고 평범하지 않은 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은

<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 페이지 전체 –

순이익 사용하고있는 예뿐만 아니라 우리에게 HTML 부분을 보여보십시오, 나는 HTML – Beep

'장치에 추가 할 수 있습니다 한정자'min'과'max'가있는 -width'는 더 이상 사용되지 않아야합니다. 대신에'width'를 사용하십시오 ('max-width'와'min-width'). https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width –

사용 min-width 및 max-width을 추가했다. 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

더하기 모르겠지만 감사드립니다 첫 번째는 – 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

이며로드 순서도 좋습니다 –

미디어 쿼리가 응답하지 않음

답변

관련 문제