슈

hidden-xs , lg and 미디어쿼리

· 2021-01-29 (금) 16:36:24 · 8148 · 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 전용인거 같은데요?
@나무사랑 부트스트랩 전용 맞습니다.
댓글을 작성하시려면 로그인이 필요합니다.
+
제목 글쓴이 날짜 조회
21-04-04 조회 7,398
21-04-03 조회 8,206
21-04-01 조회 8,193
21-03-27 조회 8,786
21-03-16 조회 7,972
21-03-16 조회 8,496
21-03-15 조회 9,752
21-03-10 조회 6,622
21-03-09 조회 9,188
21-03-09 조회 1만
21-03-08 조회 7,600
21-03-08 조회 1만
21-03-07 조회 6,863
21-03-05 조회 7,567
21-03-04 조회 9,589
21-02-26 조회 7,676
21-02-24 조회 6,755
21-02-20 조회 1만
21-02-16 조회 9,197
21-02-16 조회 7,183
21-02-14 조회 1.7만
21-02-11 조회 8,583
21-02-03 조회 7,250
21-02-01 조회 7,357
21-01-31 조회 9,291
21-01-30 조회 6,800
21-01-29 조회 8,149
21-01-29 조회 7,717
21-01-28 조회 8,177
21-01-28 조회 1.1만