[Udemy] 가격표 페이지 만들기

https://smthousand.github.io/2022_practice/03_pricing-table/

 

미디어 쿼리를 이용해 모바일, PC 디바이스에서 다르게 출력되도록 작업했다. 원래 PC 먼저 작업하고 모바일을 작업하는 편인데, 현업에선 모바일 디바이스 먼저 작업하는 일이 잦아 순서를 바꿔보았다. 

 

모바일 디바이스 먼저 작업하게 되면 미디어 쿼리는 어떻게 작업해야 할까?

1분 코딩님의 게시글에 따르면 min-width를 사용해야 한다고 한다.

 

 min-width 는 최소 px 이상인 경우에 적용되는 코드다, 즉 min-width: 1600px 이라면 1600px 이상일 경우 적용된다는 소리다.

@media (min-width: 1600px) {
  .panel {
    width: 60vw;
  }
}

모바일 화면에는 panel 부분이 100%로 꽉 찼지만 1600px 이상(Wide) 디바이스일 경우 가로 크기가 60vw로 설정했다.

 

결론

모바일 디바이스 => PC 디바이스로 작업할 경우 min-width를 채용해 속성을 추가하며 작업하고

PC디바이스 => 모바일 디바이스로 작업할 경우 max-width를 채용해 속성을 지워주며 작업한다

1분 코딩: https://studiomeal.com/archives/1004