hidden-xs , lg and 미디어쿼리 정보
hidden-xs , lg and 미디어쿼리본문
※ 부트스트랩
<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>
1
댓글 4개
