미디어 쿼리 사용

화면 해상도가 특정 크기 사이에 있고 제대로 작동하지 않을 때 이미지를 표시하는 미디어 쿼리를 만들려고합니다. 다음을 사용하고 있습니다.미디어 쿼리 사용

<style> 
@meida (min-width: 701px) and (max-width: 5000px) { 
<div="sixteen columns" align="center"> 
<div class="home-boxes"><img src="http://www.ursovain.com/wp-content/uploads/boxes-3.jpg"> 
</div> 
} 
</style>

출처

2014-09-03 Chris English

Welcome! '@ meida'는'@media'이어야합니다. 그리고 HTML 요소를 스타일 안에 포함해서는 안됩니다. 실제로는 HTML 요소가 아니지만, 작성한 방식이 아닙니다. 기본적으로 HTML이나 CSS에 관한 문서 나 튜토리얼을 읽어야한다고 생각합니다. 왜냐하면이 코드는 엉망이되기 때문입니다. – GolezTrol

당신은 CSS가 아니라 자바 스크립트를 찾고 있습니다. – Mike

자바 스크립트 솔루션은 Matchmedia, https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia를 사용합니다. –

아래 예제에서와 같이 지정해야합니다. HTML과 CSS는 별개입니다. 이 화면 조건이 충족 될 때 미디어 쿼리 위의 내 예제에서

<style> 
@media (max-width: 600px) { 
    .home-boxes { 
    display: none; 
    } 
} 
</style>

HTML

<div class="home-boxes"> 
    <img src="http://www.ursovain.com/wp-content/uploads/boxes-3.jpg" /> 
</div>

은 내 CSS를 적용합니다. 이 경우 적용 할 CSS는 home-boxes의 모든 요소에 display: none입니다.

출처

2014-09-03 19:21:01 Vector

미디어 쿼리 사용

답변

관련 문제