@media only screen and (min-width: 960px) and (max-width: 1140px) {

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

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

@media only screen and (max-width: 480px) {

@media only screen and (max-width: 320px) {

@media only screen and (max-width: 320px) {

/* disable webkit text size adjust (for iPhone) */
html {
-webkit-text-size-adjust: none;
}

펌: http://nalrarydesigner.tistory.com/77

미디어쿼리 구문은 반드시 ‘@media’로 시작합니다.

그 다음 all이나 only나 print, screen등의 속성을 써주는데 보통은 all이나 only나 screen 세가지 중 하나를 사용합니다.

@media all: 모든 디바이스에서 실행됩니다.
@media only: 미디어쿼리를 지원하는 환경에서만 실행됩니다. only 대신 not키워드를 사용하게 되면 해당 내용은 실행되지 않습니다.
@media screen: LCD, CRT등의 화면을 가진 디바이스에서 실행됩니다.

여기까지 작성하셨다면 이제 진짜 조건문을 써줄 차례입니다.

예시 구문 : ‘@media screen and (min-width: 481px)’

@media screen 다음에 들어간 ‘and’는 앞 내용과 뒤 내용을 연결해주는 역할을 하며 앞,뒤 내용을 모두 만족해야 실행됩니다.
다시 말해 위 구문에서 ‘min-width:481px’은 현재 화면이 481px이상일 경우에 실행한다는 것을 의미하기 때문에 ‘screen’의 조건은 일치하지만 481픽셀보다 작다면 저 구문은 실행되지 않습니다.

양쪽 한가지 조건만 일치해도 구문이 실행되도록 하려면 ‘and’ 대신 ‘,’를 사용하면 됩니다.