반응형 css px,%,em 에 대해서

Question

모바일 페이지를 고려하지 않은 pc용 사이트를 모바일용으로 바꿔보려고 하는데 폰트 사이즈를 px로 했더니 반응형으로 만들때 일일히 px로 해주는게 번거로울거같아서보니까 px보다는 %나 rem, vw,vh 를 이용하시라고 하더라고요사용법을 뒤져보았는데 이해하기가 조금 힘들어서제 코드로 한번 봐주시면 감사할것같습니다! //html

WELCOME

//css#home .title_logo p { font-size: 100px; color: #fff; letter-spacing: 3px; margin-bottom: 10px; text-align: left; text-shadow: 4px 5px 5px #444; }@media (max-width: 1023px) { #home .title_logo p { font-size: 84px; } } @media (max-width: 767px) { #home .title_logo p { font-size: 64px; } } @media (max-width: 639px) { #home .title_logo p { font-size: 44px; } } 이렇게 @media 를 추가해주었는데 em,rem 은 상위 태그의 폰트 사이즈를 1em 으로 갖는다고 하잖아요,그럼 저는 어떻게 코드를 고쳐야할까요? 그냥 0.8em 이런식으로 넣어주니까 적용 안되는거 보니상위 태그에 100px로 값을 줘야할거같은데 ,,, %를 쓰는게 더 나을지 ㅠㅠ 감이 안오네요 ..!#home { font-size : 94px; }이렇게 해주면 다른 요소들이 바뀌기때문에 안되구 ,, 상위 태그를 하나 더 넣어줘야할까요?

장독깨기 · Accepted Answer

보통 최상위 정의돼 있으니 그냥 쓰시면 됩니다. 보통 16px 가 1rem 입니다.32px &#61; 2rem, ...

반응형 css px,%,em 에 대해서

1개의 답변

Q&A 목록