미디어쿼리

 

@media all and (orientation:portrait) {

     #for portrait style codes..
}

/* 세로방향 */

@media all and (orientation:landscape) {

     #for portrait style codes..
}

/* 가로방향 */

@-ms-viewport {
/*ie10 윈도우8 기기전용 반응형 디자인 적용*/
 width: device-width;
}

@viewport {
 width: device-width;
}

@media screen and (max-width: 400px) {
/* 최고400px 까지*/
}

@media screen and (min-width: 400px) {
/*최소400px  까지 */

@media screen and (min-width: 400px) and (max-width:600px) {
/*400px 600px 안에 적용 */
[출처] 미디어쿼리(media query) 분기 설정|작성자 killPass

[출처] 미디어쿼리(media queries) 문법정리|작성자 SniperM