[CSS] 화면 스크린 크기에 따라 표시 / 숨김 > 기술자료

• 목록

화면 스크린 크기에 따라 표시 / 숨김 - 반응형 테마에서 모바일 데스크탑에서만 보이게 / 안보이게


1. 화면 사이즈가 450px 이하일 때만 보이는 코드

/* 화면 사이즈가 450px 이하일 때만 표시 */
@media screen and (min-width: 450px) {
    #HTML {display:none;}
}

/* 화면 사이즈가 999px 이상일 때만 표시 */
@media screen and (max-width: 999px) {
    #HTML {display:none;}
}
 


2. 접속하는 화면 크기에 따라, 보여줄 내용을 각각 다르게

(1) CSS 내용

/* 접속하는 화면 크기에 따라 표시/숨김을 제어 */
/* 640보다 작을경우 */
@media all and (max-width: 639px) {
    .SizeVisibleClass .ViWidthS{display:block;}
    .SizeVisibleClass .ViWidthM{display:none;}
    .SizeVisibleClass .ViWidthL{display:none;}
}
/*  640보다 크고 1200보다 작을경우  */
@media all and (min-width: 640px) and (max-width: 1200px) {
    .SizeVisibleClass .ViWidthS{display:none;}
    .SizeVisibleClass .ViWidthM{display:block;}
    .SizeVisibleClass .ViWidthL{display:none;}
}
/* 1024 이상 경우 */
@media all and (min-width: 1024px) {
    .SizeVisibleClass .ViWidthS{display:none;}
    .SizeVisibleClass .ViWidthM{display:none;}
    .SizeVisibleClass .ViWidthL{display:block;}
}


(2) HTML 내용
<div class="SizeVisibleClass">
    <div class="ViWidthL">데스크탑과 같은 큰 스크린으로 접속시 보여줄 내용</div>
    <div class="ViWidthM">타블렛과 같은 중간 크기 스크린으로 접속시 보여줄 내용</div>
    <div class="ViWidthS">스마트폰 같은 작은 크기 스크린으로 접속시 보여줄 내용</div>
</div>