모바일과 pc에서 다르게 보여주고 싶습니다. 채택완료
허걱김선생
2년 전
조회 1,829
수고하십니다.
아래 코드를 모바일과 pc에서 위치와 크기를 다르게 하고 싶은데
아래와 같이 코드를 써서 보여주려해도
소스가 먹히지가 않네요.
pc에서는 보이고 모바일에서는 안보이게
내용
모바일에서는 보이고 pc에서는 안보이게
내용
이 코드 말고 스타일이나 이미지에서
위치와 크기를 조절 해 줄 수 있을까요?
</p>
<p> <style>
body {background-color: #fff; margin:0; padding: 0;}
ul {margin: 0;}
.fixed_quick {
position: fixed;
z-index: 99999;
bottom: 130px; /* 위치 */
right: 35px; /* 위치 */
}</p>
<p> .quick {
border-radius: 40%;
text-align: center;
height: 50px; /* 크기 */
width: 50px; /* 크기 */
box-sizing: border-box;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.05); /* 그림자 */
cursor: pointer;
transition: all 350ms cubic-bezier(0.50, 1, 0.07, 1);
border:0.0px solid rgba(0,0,0,0.1); /* 테두리라인 */
}
.quick svg {transition: all 350ms cubic-bezier(0.50, 1, 0.07, 1);}
.quick:hover {box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.01); border:0.0px solid rgba(0,0,0,0.5);}
.quick:hover svg {fill: #000;} /* 마우스오버시 svg 아이콘의 fill 변경 */</p>
<p> /* 퀵메뉴 개별 스타일 */</p>
<p> .quick3 {background-color: #; margin-top: 38px;}
.quick3 svg {margin-top: 13px;}
.quick4 {background-color: #; margin-top: 8px;}
.quick4 svg {margin-top: 13px;}
</style>
<!-- } --></p>
<p><!-- 퀵메뉴 시작 { -->
<div class="fixed_quick">
<ul></p>
<p>
<!-- 퀵메뉴4 // 여기는 고정 입니다.{ -->
<div class="quick quick4" onclick="location.href='tel:000-0000';">
<img src="<?php echo G5_THEME_URL;?>/html/image/t_bg02.png" width="70" height="auto" alt="전화상담" title="전화상담">
</div>
<!-- } -->
</p>
<p> <div class="quick quick3" onclick="location.href='#';id='MOVE_TOP_BTN'">
<img src="<?php echo G5_THEME_URL;?>/html/image/t_bg04.png" width="70" height="auto" alt="Top" title="Top">
</div>
<script>
//TOP 버튼
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('#MOVE_TOP_BTN').fadeIn();
} else {
$('#MOVE_TOP_BTN').fadeOut();
}
});
$("#MOVE_TOP_BTN").click(function() {
$('html, body').animate({
scrollTop : 0
}, 400);
return false;
});
});
</script>
</ul>
</div></p>
<p> <script>
//클릭액션 quick4 를 클릭하는 경우 나머지 보이기&감추기
$(document).ready(function() {
$('.quick4').click(function() {
$('.quick3').fadeToggle(300);
});
});
</script></p>
<p>
<!-- } 퀵메뉴 끝 --></p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
2년 전
</p>
<p><style></p>
<p>.my-class { padding : <?php echo $is_moble ? "5px" : "10px"; ?>; }</p>
<p></style></p>
<p>
어대충 이런 식으로요 만일 달라야할 css 가 많다면...
</p>
<p><?php if ($is_mobile) { ?></p>
<p><style></p>
<p> 모바일 css</p>
<p></style></p>
<p><?php } else { ?></p>
<p><style></p>
<p> pc css</p>
<p></style></p>
<p><?php } ?></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
비타주리
2년 전
common.php 가 인클루드 되어 있나요?
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인