211209 모바일 페이지 과제를 하며 새로 알게된 것과 주의해야 할 점들을 정리해 본다.
디자인 파일에서 px값을 체크!
자식태그 px ÷ 부모태그px = 결과값
결과값 x 100 = %(구하고자 하는 값)
input {
-webkit-appearance: none;
-webkit-border-radius: 0;
}
(다만, 웹 접근성은 고려할 수 없음...)
$browser-font-size: 16;
@function em($pixels, $context: $browser-font-size) {
@return #{$pixels/$context}em;
}
.title {
font-size: em(32); // 32/16 = 2em;
}
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단위 변경 */
}