미디어쿼리 작성할때

Question

안녕하세요! 현재 재직중인 디자이너입니다!

웹 사이트를 미디어쿼리로 이용해 반응형을 제작할 때
@media (min-width: 576px) { ... } 
 
// 태블릿 디바이스 (가로 해상도가 768px 보다 큰 화면에 적용) 
@media (min-width: 768px) { ... } 
 
// 데스크탑 (가로 해상도가 992px 보다 큰 화면에 적용) 
@media (min-width: 992px) { ... } 
 
// 큰화면 데스크탑 (가로 해상도가 1200px 보다 큰 화면에 적용) 
@media (min-width: 1200px) { ... }

이런 식으로 나누어진 것이 아니라 개발자 모드에 PC~모바일까지 체크하면서 수정해야 하는 부분만
그 크기에 맞추어 미디어쿼리 추가하면서 작성하고 있는데 이게 잘못된 작업스타일인지 잘 모르겠습니다.😭😭😭

선배님들의 도움이 필요합니다ㅜㅜ

프레드윰 · Answer

미디어쿼리 할때 꼭 브레이크 포인트 로 해야되요 디바이스 크기 하나씩 맞춰서 하면 전부다 해야하니 효율성이 떨어지고 여러 가지로 문제가 발생되요 아이폰 5혹은 갤럭시 폴드만 따로 디바이스 잡고 하시고 나머진 브레이크포인트 잡아서 하세요 도움되시길 바래요

문정동개발자 · Answer

모든 부분을 전체적으로 작업하지 않으시고 필요한 부분만 미디어쿼리로 작업한다는 말씀이시죠?

그렇게해서 문제가 없다면 잘못된 스타일이 아닙니다.

그런데 디자이너신데 css까지 작업하시려면 엄청 힘드시겠네요.... 어떤 기술스택으로 작업하시는지는 모르겠지만 피그마에 반응형,적응형 관련해서 css로 변환해주는 여러가지 플러그인들이 있는 것으로 알고있습니다. 한번 활용해보셔도 좋을 것 같습니다.