rhanziy

css.반응형 폰트사이즈 관련 팁 본문

Html_css_js

css.반응형 폰트사이즈 관련 팁

rhanziy 2021. 12. 30. 21:12
html { font-size: 62.5%; } /* 기본 100% = 16px을 62.5% = 10px 단위로 변경 */
    .image { width: 12rem; } /* 120px */
    .item { font-size: 1.6rem; } /* 16px */
    .copyright { margin-top: 5rem; } /* 50px */
    
    @media all and (max-width: 750px) {
      html { font-size: 50%; } /* 문서 내 모든 rem단위 변경 */
    }

반응형 디자인의 경우 사용자가 웹 브라우저 설정에서 폰트 기본 사이즈를 작거나 크게 변경할 수 있어야 하기 때문에 px을 쓰지 않는다. px 계산 조금 더 쉽게 정의하는 법!

'Html_css_js' 카테고리의 다른 글

javascript. 연산자, 반복문  (0) 2022.01.17
javascript. script태그 async 와 defer의 차이점  (0) 2022.01.16
css.background, drop-shadow  (0) 2021.12.20
js.index번호, 객체 복제  (0) 2021.12.20
fullpage.js 플러그인 옵션  (0) 2021.12.18
Comments