미디어 쿼리쓸 때 참고
https://material.io/resources/devices/
Device Metrics - Material Design
A comprehensive resource for sizing, resolution and pixel density across popular devices.
material.io
디바이스별 크기를 정리해둔 곳! 넘 좋아..ㅠ 보기좋고 정리되어있고..
우선 나는 이렇게 해보려고 한다..
| 모바일 | 320px~768px |
| 태블릿 | 769px~992px |
| 데탑 | 993px~1280px |
| 더 큰 데탑 | 1280px~ |
3개로 나누면 이렇게 하면되려나
/*모바일 일때*/
@media screen and (min-width: 320px) and (max-width: 768px) {
}
/*태블릿 일때*/
@media screen and (min-width: 769px) and (max-widht: 992px) {
}
/*데스크탑 일때*/
@media screen and (min-width: 993px) {
}
미디어쿼리 찾아봐도 다들 정하는 기준이 달라서 뭐가 맞고 틀린지 모르겠네
우선 시행착오를 겪어보고 옵니다!!
- 시행착오..
위에 데탑보다 더큰데탑이란 사이즈를 왜만들었나 했는데 저렇게 4번 나누는게 원하는 비율이 나옴..
데탑으로 993px 위의 모든 뷰를 이쁘게 보여주기엔 뭔가 모자란 느낌..?
그래서 4개로 나눠쓰기로함 이게 이뿜
/*모바일 일때*/
@media screen and (min-width: 320px) and (max-width: 768px) {
}
/*태블릿 일때*/
@media screen and (min-width: 769px) and (max-width: 992px) {
}
/*데스크탑 일때*/
@media screen and (min-width: 993px) and (max-width: 1280px) {
}
/*풀스크린 데스크탑 일때*/
@media screen and (min-width: 1281px) {
}
작업하다보니 이게 더 효율이좋고 깔끔해서 이렇게 쓰기로했다.
문제는 모바일부터 제작한다면 이게 가능하지만 아니면... 힘듬ㅜㅠ
/*모바일 이상 일때*/
@media screen and (min-width: 320px) {
}
/*태블릿 이상 일때*/
@media screen and (min-width: 768px) {
}
/*데스크탑 이상 일때*/
@media screen and (min-width: 993px) {
}
/*풀스크린 데스크탑 일때*/
@media screen and (min-width: 1281px) {
}