모바일 환경을 찾는 미디어쿼리를 써요

미디어쿼리로 모바일 브라우저에 특별한 스타일을 적용해요.

1. css 살펴보기.

모바일 브라우저는 포인터가 없고, 터치스크린에 기반이면 조건에 맞아서 적용되어요. 모바일 기기에 마우스를 연결하고 사용하는 경우도 있어서 주의하여야 하겠쩌.

@media (pointer:none),(pointer:coarse) {
  body{font-size:1em}
}

developer.mozilla.org - @media/pointer

</div>
                    
        <div class="revenue_unit_wrap">
  <div class="revenue_unit_item adfit">
    <div class="revenue_unit_info">728x90</div>
    <ins class="kakao_ad_area" style="display: none;" data-ad-unit="DAN-QCdDUu1DnbqA965C" data-ad-width="728px" data-ad-height="90px"></ins>
    <script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async="async"></script>
  </div>
</div>

<div class="container_postbtn #post_button_group">
  <div class="postbtn_like"><script>window.ReactionButtonType = 'reaction';
window.ReactionApiUrl = '//catty.tistory.com/reaction';
window.ReactionReqBody = {
    entryId: 117
}</script>
<div class="wrap_btn" id="reaction-117" data-tistory-react-app="Reaction"></div><div class="wrap_btn wrap_btn_share"><button type="button" class="btn_post sns_btn btn_share" aria-expanded="false" data-thumbnail-url="https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png" data-title="모바일 환경을 찾는 미디어쿼리를 써요" data-description="미디어쿼리로 모바일 브라우저에 특별한 스타일을 적용해요.                                                        1. css 살펴보기.모바일 브라우저는 포인터가 없고, 터치스크린에 기반이면 조건에 맞아서 적용되어요. 모바일 기기에 마우스를 연결하고 사용하는 경우도 있어서 주의하여야 하겠쩌.@media (pointer:none),(pointer:coarse) {  body{font-size:1em}} developer.mozilla.org - @media/pointer 🐾 이미지 보기" data-profile-image="https://tistory1.daumcdn.net/tistory/4667777/attach/a694cf0ea8484c42aecb654933e2c81b" data-profile-name="Cattiy" data-pc-url="https://catty.tistory.com/entry/css-mediaquery-mobile" data-relative-pc-url="/entry/css-mediaquery-mobile" data-blog-title="Cattiy Lab"><span class="ico_postbtn ico_share">공유하기</span></button>
  <div class="layer_post" id="tistorySnsLayer"></div>
</div><div class="wrap_btn wrap_btn_etc" data-entry-id="117" data-entry-visibility="public" data-category-visibility="public"><button type="button" class="btn_post btn_etc2" aria-expanded="false"><span class="ico_postbtn ico_etc">게시글 관리</span></button>
  <div class="layer_post" id="tistoryEtcLayer"></div>
</div></div>
<button type="button" class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="4667777" data-url="https://catty.tistory.com/entry/css-mediaquery-mobile" data-device="web_pc" data-tiara-action-name="구독 버튼_클릭"><em class="txt_state"></em><strong class="txt_tool_id">Cattiy Lab</strong><span class="img_common_tistory ico_check_type1"></span></button>  <div data-tistory-react-app="SupportButton"></div>
</div>

모바일 환경을 찾는 미디어쿼리를 써요

1. css 살펴보기.

댓글쓰기

댓글 삭제

댓글 개