스프링링링
611
2021-04-01 14:01:53 작성 2021-04-01 14:10:47 수정됨
1
132

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


모바일 페이지를 고려하지 않은 pc용 사이트를 모바일용으로 바꿔보려고 하는데

폰트 사이즈를 px로 했더니 반응형으로 만들때 일일히 px로 해주는게 번거로울거같아서

보니까 px보다는 %나 rem, vw,vh 를 이용하시라고 하더라고요

사용법을 뒤져보았는데 이해하기가 조금 힘들어서

제 코드로 한번 봐주시면 감사할것같습니다!


//html

<body id="home">
  <div>
    <div class="title_logo">
      <p>WELCOME</p>
    </div>
  </div>


//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; }

이렇게 해주면 다른 요소들이 바뀌기때문에 안되구 ,, 상위 태그를 하나 더 넣어줘야할까요?

0
  • 답변 1

  • 장독깨기
    3k
    2021-04-01 16:12:45

    보통 최상위 정의돼 있으니 그냥 쓰시면 됩니다.

    보통 16px 가 1rem 입니다.

    32px = 2rem, ...

  • 로그인을 하시면 답변을 등록할 수 있습니다.