테스트 사이트 - 개발 중인 베타 버전입니다

모바일과 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 포인트

</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 가 인클루드 되어 있나요?

댓글을 작성하려면 로그인이 필요합니다.

별명은별명

스타일도 저렇게 감싸면 pc일때 적용되고 mobile 에서 적용됩니다

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인