https://naradesign.github.io/article/media-query.html 

https://developers.google.com/web/fundamentals/design-and-ux/responsive?hl=ko 

https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/ 

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/




기기별 미디어쿼리 사이즈,모바일 디바이스별 사이즈

 

bee24032c5799a6c0f18052658dbe720_1464279 

Viewports


Desktop
1600x992px scaled down to scale(0.3181)
Laptop
1280x802px scaled down to scale(0.277)
Tablet
768x1024px scaled down to scale(0.219)
Mobile
320x480px scaled down to scale(0.219)

 

 

•1200px (which we also set as the max width)
•960px
•768px
•600px
•480px
•320px

 

 

 

/* 스마트폰 가로+세로 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px){
}
 
/* 스마트폰 가로 */
@media only screen and (min-width : 321px) {
}
 
/* 스마트폰 세로 */
@media only screen and (max-width : 320px) {
}
 
/* iPhone4와 같은 높은 크기 세로 */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}
 
/* iPhone4와 같은 높은 해상도 가로 */
@media only screen and (min-width : 640px) {
}
 
/* iPad 가로+세로 */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
}
 
/* iPad 가로 */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}
 
/* iPad 세로 */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}
 
/* 데스크탑 브라우저 가로 */
@media only screen and (min-width : 1224px) {
}
 
/* 큰 모니터 */
@media only screen and (min-width : 1824px) {
}


http://malza.com/bbs/board.php?bo_table=webskill_css&wr_id=80&sfl=wr_name&page=3&t=%EA%B8%B0%EA%B8%B0%EB%B3%84-%EB%AF%B8%EB%94%94%EC%96%B4%EC%BF%BC%EB%A6%AC-%EC%82%AC%EC%9D%B4%EC%A6%88%EB%AA%A8%EB%B0%94%EC%9D%BC-%EB%94%94%EB%B0%94%EC%9D%B4%EC%8A%A4%EB%B3%84-%EC%82%AC%EC%9D%B4%EC%A6%88 


추천한 사람