글꼴 CSS 초기 설정을 62.5%로 설정하여 rem 계산을 쉽게 해결하는 방법
글꼴 초기 설정
배경
시행
과제점
rem로 하자 rem 그러나 px가 아니면 디자인 커뮤니케이션이 어렵기 때문에 px와 호환되는 숫자를 내고 싶습니다.해결책
html
font-size: 62.5%
이렇게하면
1rem = 10px 1.6rem = 16px와 잘 rem과 px가 연동범용성을 갖게 한다
sass의 mixin 변수
@mixin fz($size: 24, $base: 16)
font-size: $size + px
font-size: ($size / ($base * 0.625)) + rem
font-size: $size + px참조 can i use
htps : // 게으름. 코 m/#후아 t=레 m
mixin 로딩
.hoge
@include fz(16)
내보낸 결과
.hoge
font-size: 16px
font-size: 1.6rem
이것으로 rem의 계산은 생각하지 않고 어색한 폰트 사이즈를 쓸 수 있군요!
참고 초기 설정
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
word-wrap: break-word;
font-size: 62.5%;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: relative;
color: #222;
font-size: 100%;
line-height: 1.5;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-weight: 400;
-webkit-text-size-adjust: 100%;
}
.wrap{
font-size: 1.6rem;
}
CodePen
See the Pen How to font-size: 62.5% by Pistol ( @pistol ) on CodePen .
참조하신 기사
font-size 지정 "px, em, rem, %"의 종류
htps //w w. w-엔 dぇっ s. 코 m / ぇ b_ ぁ 보 / 세 r ゔ 세 / p 로즈 c 치온 / 49
{font-size:62.5%}가 62.5%가 된 이유
htps // 01 에아 rth. jp / うぇbc 레테 / 코 온 g / 푹 t-she_why_62 포인 t5 페르 센 t /
수수께끼의 숫자, {font-size: 62.5%;}란 무엇인가?
htps //w w. 그래… jp/b㎉g/28. HTML
Reference
이 문제에 관하여(글꼴 CSS 초기 설정을 62.5%로 설정하여 rem 계산을 쉽게 해결하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/AsagiriDesign/items/af182de0e1c6245d102d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
