모바일에서 미디어쿼리 사이즈 부분 질문드립니다.
@media all and (max-width:1300px)
@media all and (max-width:1200px)
@media all and (max-width:1100px)
@media screen and (max-width: 768px)
@media screen and (max-width:640px)
@media screen and (max-width: 480px)
@media screen and (max-width: 360px)
@media all and (max-width:1200px)
@media all and (max-width:1100px)
@media all and (max-width:768px)
여기서 굳이 작업하지 않아도 되는 사이즈가 있나요?
그리고 screen과 all의 차이점을 알고싶습니다.
답변 2개
클라이언트의 요청에 따라 다르겠지만 일반적으로 아래와 같은 브레이크포인트 만으로도 반응형을 구현할 수 있습니다.
@media all and (max-width: 1200px)
@media all and (max-width: 1024px)
@media screen and (max-width: 768px)
@media screen and (max-width: 640px)
@media screen and (max-width: 480px)
@media screen and (max-width: 360px)
screen은 화면에 표시되는 스타일(모니터, 모바일기기, 태블릿)에서 사용하는 스타일이고,
all은 화면과 상관없이 모든 출력장치(screen기기, 인쇄 등)에서 사용하는 스타일입니다.
따로 인쇄용 스타일을 지정하지 않는다면 screen을 사용하시면 됩니다.
답변을 작성하려면 로그인이 필요합니다.