모바일에서 미디어쿼리 사이즈 부분 질문드립니다.
본문
@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을 사용하시면 됩니다.
all은 말그대로 모든 디비이스 화면프린터등등 적용대상
screen 는 피시,테블릿,휴대폰 원하는 디비아스 대상 입니다.
추가로 max 하위모든적용대상 min 는 상위 모든적용대상 참조하시면됩니다.