hidden-xs , lg and 미디어쿼리

· 4년 전 · 4444 · 4

※ 부트스트랩

<div class="hidden-xs hidden-sm"></div><!-- 모바일에서 안나옴 pc 나옴 -->
<div class="hidden-lg hidden-md"></div><!-- pc 에서 숨겨짐 모바일에서 나옴  -->

 

 

 

※ 미디어쿼리

                      <style>
                        @media (min-width: 1200px) {
                        /*  pc */
                        .pc-img{ display:block}
                        .m-img{display:none}

                        }

                        @media (max-width: 1199px) {
                         /*  mobile */
                        .pc-img{ display:none}
                        .m-img{display:block}

                        }

                    </style>

 

 

/* 모바일기기 1 */
@media only screen and (max-width: 320px) {

}

/* 모바일기기 2 */
@media only screen and (min-width: 321px) and (max-width: 768px){

}
/* 태블릿 */
@media only screen and (min-width: 769px) and (max-width: 1200px){

}
/* 데스크탑 */
@media only screen and (min-width: 1201px) {

}

 

<div class="pc-img">
<img src="<?php echo G5_THEME_IMG_URL ?>/main004.jpg" class="img-resonsive">
</div>
<div class="m-img">
<img src="<?php echo G5_THEME_IMG_URL ?>/main004s.jpg" class="img-resonsive">
</div>

|

댓글 4개

쿨팁이네요. 감사해요.
hidden-lg, hidden-xs, hidden-sm 이 클래스는 bootstrap 전용인거 같은데요?
@나무사랑 부트스트랩 전용 맞습니다.
댓글을 작성하시려면 로그인이 필요합니다. 로그인

그누보드5 팁자료실

+
제목 글쓴이 날짜 조회
4년 전 조회 3,333
4년 전 조회 3,845
4년 전 조회 5,575
4년 전 조회 4,026
4년 전 조회 3,243
4년 전 조회 6,435
4년 전 조회 5,269
4년 전 조회 3,498
4년 전 조회 1.2만
4년 전 조회 4,922
4년 전 조회 3,649
4년 전 조회 3,867
4년 전 조회 5,490
4년 전 조회 3,147
4년 전 조회 4,445
4년 전 조회 4,009
4년 전 조회 4,412
4년 전 조회 6,652
4년 전 조회 2,959
4년 전 조회 4,980
4년 전 조회 5,712
4년 전 조회 3,763
4년 전 조회 2,814
4년 전 조회 3,048
5년 전 조회 5,650
5년 전 조회 6,198
5년 전 조회 3,599
5년 전 조회 5,091
5년 전 조회 7,064
5년 전 조회 1.2만
🐛 버그신고