hidden-xs , lg and 미디어쿼리

· 5년 전 · 4514 · 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,403
4년 전 조회 3,919
4년 전 조회 5,886
4년 전 조회 4,097
4년 전 조회 3,315
4년 전 조회 6,521
5년 전 조회 5,358
5년 전 조회 3,562
5년 전 조회 1.3만
5년 전 조회 4,996
5년 전 조회 3,717
5년 전 조회 3,936
5년 전 조회 5,569
5년 전 조회 3,212
5년 전 조회 4,515
5년 전 조회 4,077
5년 전 조회 4,481
5년 전 조회 6,777
5년 전 조회 3,029
5년 전 조회 5,058
5년 전 조회 5,798
5년 전 조회 3,837
5년 전 조회 2,888
5년 전 조회 3,109
5년 전 조회 5,726
5년 전 조회 6,260
5년 전 조회 3,654
5년 전 조회 5,160
5년 전 조회 7,127
5년 전 조회 1.3만