Home › 게시판 › 커뮤니티 › Q&A › 모바일 적용시 폰트문제..

Tagged
4개 답변, 3 voices Last updated by Avatar of Matthew ParkMatthew Park 8 years, 3 months 전
  • Avatar of jhh0712jhh0712
    Participant
    @jhh0712
    2016/01/25 5:57 오후 #29891

    현재 사이트가 pc로보면 깔끔하게 잘보이는데

    모바일로 보게되면 폰트가 너무커서 메뉴폰트랑, 페이지 홈화면에 넣은폰트, 하단 푸터부분 폰트 때문에 다 뒤틀려서 보입니다.

    그래서 style.css 에서 @media 부분의 모바일부분의 폰트를 수정해봤는데 크기가 줄어들질 않습니다..

    메인화면 따로 플러그인을 사용해서 제작한건 아니구요, 직접 css작성하여 페이지 제작했습니다.

    해결방안이 있다면 도움부탁드립니다

    Avatar of jhh0712
    jhh0712
    Avatar of 082net082net
    Keymaster
    @082net
    2016/01/25 7:55 오후 #29892

    페이지 URL을 알지 못하면 답변이 어려운 문제로군요.

    미디어 쿼리들 중에서 스마트폰 크기에 폰트 관련 스타일을 적용했는지 우선 확인해 보세요.

    Avatar of 082net
    082net
    Facebook 사용자 모임 그룹 도 함께 운영되고 있으며, 격 주로 미트업과 스터디를 진행하고 있으니 관심 있으신 분들의 많은 참여 바랍니다 🙂
    Avatar of jhh0712jhh0712
    Participant
    @jhh0712
    2016/01/26 9:18 오전 #29904

    사이트주소는 medipilates.org 입니다.

    Avatar of 082net082net
    Keymaster
    @082net
    2016/01/26 9:03 오후 #29909

    @media (max-width:360px) … 부분 다음에 .site-main-page 에 대한 폰트 크기가 다시 지정되어 있어 적용이 되지 않는 것입니다.

    해당 부분을 맨 아래로 옮겨보세요.

    CSS파일을 읽어들여 분석하는 법칙을 이해하고 접근하신다면 잘 적용 될 거에요~

    추가로 (max-width:480px) 에서도 폰트사이즈를 조금 줄이시는게 좋을 듯 하네요.

    Avatar of 082net
    082net
    Facebook 사용자 모임 그룹 도 함께 운영되고 있으며, 격 주로 미트업과 스터디를 진행하고 있으니 관심 있으신 분들의 많은 참여 바랍니다 🙂
    Avatar of Matthew ParkMatthew Park
    Moderator
    @hackya
    2016/01/26 11:50 오후 #29915

    css 를 직접 작성하시는거면, 구글에서 “반응형 css 작성 가이드” 로 검색해 보세요.

    링크달면 댓글 지워질까봐 무서워서 링크는 못 올립니다.

    vw, vh, vmin, vmax 등으로 폰트 사이즈를 지정하면 어느 resolution 에서나 폰트 사이즈가 적절한 크기로 보여집니다. 또 media query 필요없이 한번만 폰트사이즈를 지정할 수 있어 css 가 간결해집니다. 이게 요즘 폰트 css 추세 입니다.

    Avatar of Matthew Park
    Matthew Park
    Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

    Lives in Colorado.

  • Author
    Posts
5 글 보임 - 1에서 5 까지 (총 5 중에서)
  • 답변은 로그인 후 가능합니다.