独学で勉強をしていまして、わからない事がありまして質問をさせて頂きます。

当方も独学で恐縮ですが。
min-widthとmax-widthを両方記載した場合、どちらの幅に合わせて記述をすべきかという話ですが、どちらにも合うように記述をすべきです。メディアクエリを勉強なさっているということはレスポンシブデザインを考えてらっしゃるのだと思いますが、一方の幅に合わせて記述したらレスポンシブの良さが損なわれてしまいます。

極端な一例として、2のメディアクエリを利用し、以下のようにCSSを記述したとします。

@media only screen and (min-width:320px) and (max-width:480px){
table{width:300px;}
}

幅320pxに合わせて、テーブルを300pxで表示されるようにしました。
この場合、幅320pxのブラウザではの余白は20pxになりますが、480pxのブラウザで見た時には180pxも生じるため、少々不格好なデザインになります。
逆に幅480pxに合わせようとすると、今度は幅480px以下のブラウザで見た際にデザインが崩れていきます。

ではどうすればよいのかという話になりますが、メディアクエリでブレイクポイントを決めたら、あとは幅の指定は固定pxに頼らず、%で相対的に行っていくのが良いです(いわゆるリキッドレイアウト)。

@media only screen and (min-width:320px) and (max-width:480px){
table{width:90%;}
}

とすると、幅サイズにかかわらず、幅に対して90%のテーブルを作成することができます。
他にもレスポンシブならではのテクニックはいくつかありますが、作成していく中で自分のやりやすい方法を見つけていくと楽しみが増えると思います。
メディアクエリ(というかレスポンシブデザイン)は最初はとっつきにくく、PCデザインに慣れているほどつい固定pxを乱用したくなりますが、慣れれば割と簡単にできるので頑張ってください。


また、スマホ幅ですが、以下を参考にしてください。

iPhone6の時代のviewport設定について
http://qiita.com/fnobi/items/4bec5ddf4ea83c5e1820

以上、長くなってしまいましたが、参考になれば幸いです。