첨부파일 https://imweb.eond.com/coding/432283

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 


첨부파일
코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 235 articles in 2 / 12 pages
번호 제목 제목 날짜날짜
공지 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) 2018/01/03
공지 jQuery를 배울수 있는 동네들입니다. 2013/08/09
공지 관련 링크 [1] 2010/05/23
215 [Script] body에 2개 이상의 인자 띄우기 2004/04/27
214 [HTML5] 큰 이미지 업로드 할때 테이블 뚫지 못하게 하기(reedyfox.com) 2004/05/01
213 [PHP] 홈페이지 링크를 변수화 한다는 것은 참 재밌어요. 2004/05/01
212 [PHP] 홈페이지 URL 변수화 작업 두번째 방법(by 호경) 2004/05/01
211 [PHP] www 자동 리다이렉션 시켜주기 2004/05/04
210 [Script] 링크 자동으로 onfocus="blur()" 붙이기 (by 후니) [2] 2004/05/05
209 [Script] 링크 자동으로 onfocus="blur()" 붙이기 (by 라지엘) 2004/05/05
208 [Script] 링크 자동으로 onfocus="blur()" 붙이기 (by 멋진돌) [1] 2004/05/05
207 [Script] 접속 시 자동으로 새창 띄우고, 띄워져 있으면 새로고침해도 안 띄우기 (by Aquatype) 2004/05/06
206 [Script] 새창 띄우고 자동 리사이징 (by Aquatype) 2004/05/06
205 [HTML5] 테이블과 관련된 몇가지 태그(업데이트 날짜: 04/05/20) 2004/05/07
204 [HTML5] html 페이지 나누어 깔끔하게 출력하기 2004/05/07
203 [PHP] 퍼미션 변경 2004/05/08
202 [Script] 부모창 닫고 새창 띄우기 (by zero) 2004/05/13
201 [Form] 입력 시 alt + S 먹히게 하기 2004/05/21
200 [Form] 인풋 폼 이미지로 대체하기 [1] 2004/05/21
199 [Form] 폼 이동 시(탭키 이용) 순서 정하기 (by 술도) 2004/05/21
198 [미분류] 현재 필요한 팁(임시) 2004/05/22
197 [HTML5] HTML 태그 그대로 노출하기 2004/05/22
196 [Form] 새창에서 '확인' 누르면 부모창 리로드 시키기 (by 지진) 2004/05/22

해시태그 디렉터리

지금 이순간

오늘의 핫게시물