当方も独学で恐縮ですが｡
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

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