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

키워드 : 기기별 미디어쿼리,반응형 모바일 사이즈, 모바일크기

무료아이콘 전체게시물 작성일16-04-25 03:05 조회5,713회

본문

 

 

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

 

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) {
}

 

비회원도 추천 가능합니다.
유익한 정보였다면, 추천해주세요

추천 10 비추천 0

Css + Html

113개의 게시물
목록
읽기: 10P (1lv), 쓰기: 50P (3lv), 덧글: 20P (2lv), 다운: -10P (2lv)
Css + Html 목록
번호 제목 아이디 날짜 조회수 추천
113 부트스트랩 부트스트랩 모달 (modal) 클릭시 오른쪽에 생기는 여백 17px없애기 무료아이콘 전체게시물 10-12 362 추천: 1
112 css 에어콘 출판사 메인 콘텐츠 레이아웃 관련링크 무료아이콘 전체게시물 09-13 313 추천: 1
111 css float 중앙 정렬 시키기 무료아이콘 전체게시물 09-11 391 추천: 1
110 css 모바일에서 입력창 input 클릭시 확대되는 거 막기 관련링크 무료아이콘 전체게시물 09-04 279 추천: 1
109 jQuery/java 다양한 사이드바 소스 사이드바 플러그인 관련링크 무료아이콘 전체게시물 09-02 285 추천: 1
108 css 크롬 노란 input 배경 없애기 무료아이콘 전체게시물 08-27 370 추천: 1
107 css input에 입력폼에 글자 미리 넣어두기 무료아이콘 전체게시물 08-25 199 추천: 1
106 css 마진 여백 사용시 %넓이 깨지는 경우와 width100%밀림 깨짐 해결하기 무료아이콘 전체게시물 08-17 754 추천: 1
105 etc 브라우저 별 CSS 핵 관련링크 무료아이콘 전체게시물 08-09 250 추천: 1
104 css 목록(리스트)형식의 css에 텍스트 블릿 사용하기 무료아이콘 전체게시물 08-08 190 추천: 1
103 css 넓이 100%에 25%씩 4개값을 줬는데 줄바꿈 되는 경우 ㅠㅠ 댓글1 무료아이콘 전체게시물 07-17 343 추천: 1
102 부트스트랩 동영상 슬라이드 댓글2 관련링크 무료아이콘 전체게시물 01-20 1954 추천: 16
101 부트스트랩 다중,멀티 스타일시트 우선순위 무료아이콘 전체게시물 01-19 2415 추천: 15
100 부트스트랩 부트스트랩 nav 높이를 높였을 때 다른 div 와 겹치는 현상 무료아이콘 전체게시물 01-17 1556 추천: 14
99 부트스트랩 부트스트랩에 swiper로 네이버 터치 스크롤링 메뉴 만들기 인기글관련링크 무료아이콘 전체게시물 01-17 5614 추천: 15
게시물 검색