[TIL] 23.09.08 Today I Learned / 웹페이지 반응형 수정

요약: 웹페이지 반응형 수정

일시: 23.09.08

장소: 더휴먼컴퓨터아트아카데미

배운 점:

반응형 웹 폰트 사이즈 설정

html {
    font-size: 62.5%;
    body {
        font-size: 1em;
    }
}

@media (max-width: 400px) {
    html { font-size: 70%; }
}

@media (min-width: 575px) {
    html { font-size: 80%; }
}

@media (min-width: 768px) {
    html { font-size: 100%; }
}

@media (min-width: 991px) {
    html { font-size: 120%; }
}

• 최상위 CSS 파일에 위와 같이 설정을 해두면 반응형 웹페이지를 제작할 때 보다 편하게 구현이 가능하다.
• 전체적인 크기는 균일하게 커지고 작아지기 때문에 몇몇 세세한 부분만 수정하면 된다. 
• 위와 같이 설정하면 1rem이 10px 정도 된다.

 

 

부족한 점:

반응형 웹을 제작할 때, 효율적으로 구현하는 방법을 몰라 아직까지는 하나하나 설정하는 느낌이다