제가 오늘 사이쪽의 배너를 모바일에서는 나타나면 안되서 아래와 같은 css를 추가했는데요.
@media (min-width: 1000px) {
.pcad {
display: none;
}
}
위와 같이 하니 반대 현상이 나타나서..
@media (max-width: 1000px) {
.pcad {
display: none;
}
}
이렇게 해주니 모바일에서는 안나오고 컴에서만 나오게 처리가 되었습니다.
궁금한게 저는 이런 조건에서는 안보이게 하고 싶다라고 해석하고 1000px 보다 작으면 아래 가 적용되라~ 라고 이해했는데 그게 아닌가 봅니다.
1000px 이하에서는 보이지 않게 한다의 의미는 정확히 어떻게 작성하는 것인가요? 결과적으로는 지금 아래쪽으로 하고 동작은 합니다.
댓글 5
0부터 최대 1000px 까지는 숨겨라 이게 맞는거군요.
device랑 print랑 미묘한 차이가 있어서..
@media screen and (max-width: 1000px)
근데 이런 경우는 저도 가끔 헷갈려요ㅋㅋ
매번 스타일링할 때마다 바로바로 코딩을 못하고,
max-width: 1000px면 '최대 1000이니까 1000 이하지!', min-width면 '최소 1000이니까 1000 이상이지!', 이렇게 머릿속으로 한번씩 더 프로세스를 거칩니다;;;
게다가 display 속성이 none이면 이중부정도 아니고 뭔가 삼중부정 같아서 뇌내 CPU가 버벅거려요ㅜ
mobile first!!
.pcad {display:none}
@media (min-width: 1000px) {
.pcad{display:block}
}
css3 media query를 지원하지 않는 브라우저에서는 어떤 방식으로 쓰던 문제가 발생합니다.
하지만 xe에는 기본으로 respond.js가 적용되어 있어 ie8 이하에서도 문제가 없는 것으로 알고 있습니다.
media query는 여러방법으로 기술할 수 있는데
mobile first라는 것은 media query를 기술하는 하나의 트랜드이고, 부트스트랩등 대부분의 프레임웍이 채택하고 있는 방법입니다.
현실적으로 이렇게 작성하는 것이 가장 합리적이고 간결하다고 생각됩니다.