12px = 1.2rem
14px = 1.4rem
16px = 1.6rem
18px = 1.8rem
20px = 2rem
22px = 2.2rem
24px = 2.4rem
@media (max-width: 767px) {
}
@media (min-width: 768px) and (max-width: 1023px) {
}
@media (min-width: 1024px) {
}
ex)
@media (max-width: 767px) {
html {
font-size:8px;
}
@media (min-width: 768px) and (max-width: 1023px) {
html {
font-size:9px;
}
}
@media (min-width: 1024px) {
html {
font-size:10px;
}
}
PC 에서 1.6rem = 16px / 2rem = 20px
Mobile 에서 1.6rem = 12.8px / 2rem = 16px
2. 변수 + 미디어쿼리 + rem
html {
font-size:10px;
}
:root {
–font-es : 1.3rem; (extra small = 13px )
–font-s : 1.4rem or 1.6rem; ( small = 14-16px )
–font-n : 1.6rem or 1.8rem; ( normal = 16-18px )
–font-l : 2.2rem; ( large = 22px )
–font-el : 3rem; ( extra large = 30px )
–font-ht : 4rem; ( hero title = 40px )
}
@media (max-width: 767px) {
html {
font-size:8px;
}
@media (min-width: 768px) and (max-width: 1023px) {
html {
font-size:9px;
}
}
@media (min-width: 1024px) {
html {
font-size:10px;
}
}
PC 에서 1.6rem = 16px / 2rem = 20px
Mobile 에서 1.6rem = 12.8px / 2rem = 16px
PC에서 large = 22px
Mobile 에서 large = 17.6px
h6
h5
h4
h3
h2
h1
font-size:10px;
}
body { font-size: 1.8rem; }
h6 { font-size: 1.4rem; }
h5 { font-size: 1.6rem; }
h4 { font-size: 2.2rem; }
h3 { font-size: 2.6rem; } /* sub heading */
h2 { font-size: 3.2rem; } /* sub heading */
h1 { font-size: 4rem; } /* heading */
@media (max-width: 767px) {
html {
font-size:8px;
}
@media (min-width: 768px) and (max-width: 1023px) {
html {
font-size:9px;
}
}
@media (min-width: 1024px) {
html {
font-size:10px;
}
}