반응형 css (Making our Website Responsive)

1. CH10. Making our Website Responsive

1) hardware device pixels vs. software CSS pixels

<!-- viewport 넣으면서 hardware px이 아닌 software px, css로 인식가능하게 함, 반응형 가능하게 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />

생략 시 mobile에서 전체화면 전체가 작게 보임.

content에 maximum-scale, minimum-scale, user-scaleable,... 넣을 수 있다.

 

2) viewport metatag vs. @media query

 viewport : device viewport에 맞게 hardware pixel을 software  CSS pixel로 바꿔주는 역할을 함. 그러나 design의 변화는 없음.

 @media query : size에 따라 디자인 변경

 

3) mobile first

 

4)media query

40rem이상이면~

 @media (min-width: 40rem) {

   # product-overview h1 {

    font-size: 3rem;

   }

}

 

 

https://m.blog.naver.com/govlrhaehfdl/221243111912

[CSS] max-width , min-width 속성