CSS 미디어 쿼리의 해상도 처리 > 기술자료 | 해피정닷컴

CSS 미디어 쿼리의 해상도 처리 > 기술자료

본문 바로가기

사이트 내 전체검색

CSS 미디어 쿼리의 해상도 처리 > 기술자료

HTML CSS 미디어 쿼리의 해상도 처리

페이지 정보


본문

주로 사용하는 style
@media only screen
and (max-width : 320px) {

}

@media only screen
and (min-device-width : 321px)
and (max-device-width : 767px) {

}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {

}

@media only screen
and (min-width : 1025px) {

}


그외 다양한 사이즈

<style>
/* Smartphones (portrait and landscape) */
@media only screen
and (min-device-width : 320px) {
/* Styles */
}

/* Smartphones (landscape) */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens  */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
</style>


관련자료
http://www.walterz.net/2017/07/25/jquery-미디어-쿼리-반응형-웹-개발/
http://blog.saltfactory.net/using-css-media-query-for-responsive-web/

댓글목록

등록된 댓글이 없습니다.


Total 2,634건 19 페이지
  • RSS
기술자료 목록
2274
MySQL   7523  2018-10-02 22:55 ~ 2018-10-02 22:58  
2273
PHP   10796  2018-09-30 15:07 ~ 2018-09-30 15:53  
2272
그누보드   9627  2018-09-27 23:56 ~ 2022-10-22 17:56  
2271
그누보드   8288  2018-09-27 22:01 ~ 2018-09-27 22:40  
2270
그누보드   12284  2018-09-22 01:04 ~ 2023-04-13 16:11  
2269
그누보드   8056  2018-09-21 19:28  
2268
그누보드   9496  2018-09-15 08:08 ~ 2022-04-21 03:02  
2267
전자결제   19464  2018-09-14 05:59 ~ 2020-09-08 23:29  
2266
전자결제   8705  2018-09-14 04:57 ~ 2018-09-14 04:58  
2265
전자결제   9126  2018-09-12 14:17 ~ 2019-03-21 17:04  
2264
일반   11771  2018-08-31 18:10 ~ 2018-09-14 20:50  
열람
HTML   7783  2018-08-30 15:47 ~ 2022-02-08 12:07  
2262
그누보드   7945  2018-08-30 10:41 ~ 2018-08-30 10:48  
2261
PHP   6589  2018-08-29 03:21 ~ 2018-08-29 17:13  
2260
JavaScript   11405  2018-08-28 18:49 ~ 2022-06-13 22:38  
2259
HTML   11070  2018-08-27 14:33 ~ 2021-07-25 18:16  
2258
HTML   13801  2018-08-26 14:07  
2257
일반   8309  2018-08-22 13:17  
2256
PHP   9115  2018-08-20 15:51  
2255
HTML   8845  2018-08-18 05:37  

검색

해피정닷컴 정보

회사소개 회사연혁 협력사 오시는길 서비스 이용약관 개인정보 처리방침

회사명: 해피정닷컴   대표: 정창용   전화: 070-7600-3500   팩스: 042-670-8272
주소: (34368) 대전시 대덕구 대화로 160 대전산업용재유통단지 1동 222호
개인정보보호책임자: 정창용   사업자번호: 119-05-36414
통신판매업신고: 제2024-대전대덕-0405호 [사업자등록확인]  
Copyright 2001~2024 해피정닷컴. All Rights Reserved.