古いサイトや他人様の書いたコードを見ると「screen」「all」「device-width」「only」など、知らないメディアクエリの書き方が結構あったので念のため調べてみた。

結論

一般的な環境で閲覧されるサイトであれば、基本的には@media(max-width:500px){} といった一般的な書き方でOK。

他の色々な書き方

@mediaの後に screen and とか all and と書いてあるのをたまに目にする。
実は、「結論」に載せた
@media(max-width:500px){} という書き方は、
@media all and (max-width:500px){} を省略したものらしい。

allの部分はデバイスの種類を指定できるようになっており、
all（すべてのデバイス）の他に、print（プリンター）やspeech（スピーチシンサイザ）や
screen（printやspeechを除いたもの全て。一般的なＰＣやスマホ。）がある。

なので、例えば
@media screen and (max-width:500px){} は
デバイスの種類がscreenでなおかつその幅が500px以下の場合を表す。

つまり、プリンタやスピーチシンセサイザを無視するなら
allもscreenもほぼ変わらないはずなので
やはり「結論」に書いたとおり
@media(max-width:500px){}でＯＫということになる。

max-widthはブラウザの幅。max-device-widthはデバイス自体の幅。
なので、@media (max-device-width:1000px)と指定した場合
デバイス自体の画面幅が1001px以上ならブラウザの幅を手動で小さくしても効かない。

古いcss等だと@media only screen and ～　といった感じで only　が付く場合がある。

これはメディアクエリに対応してない古いブラウザ（IE8とかなので10年以上前？）用に使ってた書き方なので、現在では必要なし。

基本的には@media(max-width:500px){} でOK