미디어 쿼리 - 일반 반응 형 템플릿

Question

모든 장치 크기를 검색하려면
미디어 쿼리를 사용해야하는 일반 응답 형 템플릿을 만들고 싶습니까? 이 웹 사이트는 당신을 도울 경우

Answer 1

확인이 Common CSS Media Queries Break Points

/*------------------------------------------ 
    Responsive Grid Media Queries - 1280, 1024, 768, 480 
    1280-1024 - desktop (default grid) 
    1024-768 - tablet landscape 
    768-480  - tablet 
    480-less - phone landscape & smaller 
--------------------------------------------*/ 
@media all and (min-width: 1024px) and (max-width: 1280px) { } 

@media all and (min-width: 768px) and (max-width: 1024px) { } 

@media all and (min-width: 480px) and (max-width: 768px) { } 

@media all and (max-width: 480px) { } 


/* Portrait */ 
@media screen and (orientation:portrait) { /* Portrait styles here */ } 
/* Landscape */ 
@media screen and (orientation:landscape) { /* Landscape styles here */ } 


/* CSS for iPhone, iPad, and Retina Displays */ 

/* Non-Retina */ 
@media screen and (-webkit-max-device-pixel-ratio: 1) { 
} 

/* Retina */ 
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (-o-min-device-pixel-ratio: 3/2), 
only screen and (min--moz-device-pixel-ratio: 1.5), 
only screen and (min-device-pixel-ratio: 1.5) { 
} 

/* iPhone Portrait */ 
@media screen and (max-device-width: 480px) and (orientation:portrait) { 
} 

/* iPhone Landscape */ 
@media screen and (max-device-width: 480px) and (orientation:landscape) { 
} 

/* iPad Portrait */ 
@media screen and (min-device-width: 481px) and (orientation:portrait) { 
} 

/* iPad Landscape */ 
@media screen and (min-device-width: 481px) and (orientation:landscape) { 
} 

Answer 2

확인 :

http://24ways.org/2011/conditional-loading-for-responsive-designs/

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

Answer 3

내가보기 엔 부트 스트랩을 사용하여 권 해드립니다. 신속한 개발. 또한 문서화가 매우 완벽합니다.

/*Anything outside of media queries is for MOBILE 
    This is Mobile first approach. 
*/ 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: 768px) { ... } 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: 992px) { ... } 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: 1200px) { ... }