モバイル版とPC版のビューの違いを@media screenで指定＊CSS＊

こんにちは、エンジニア見習いのブライアンです。 HTML/CSS/JSの知識はまだまだですが、とあるwebアプリの開発中機能のビューを担当させていただくこととなりました。
利用者様は主にスマホから利用していただいている為、モバイル版向けにビューを作成すればいいんだなと取り組みはじめました。
なんとかそれなりにいい感じのビューが出来上がってきた頃、PC版も考慮するように指示を受けました。 何か嫌な予感がする...と思いPC版に変換するとやはり今まで作成していたビューが人に見せてはいけないぐらい歪んでしまいました...
width,height,margin,padding等全てがモバイル版しか考慮しなかった為、画面の大きさが何倍も違うPC版だとそのようなことになるのは当然です。 そんな私を救ってくれたのは@media screenというコマンドです。
実際にどのようにして使うかというと...

@media screen and (max-width: 703px){
  .content{
    margin: 100px;
  }
}

上記はブラウザのwidthが703pxまではcontentクラスのmargin:100pxとして読み込まれます。widthが704px超えてしまうと上記のコードは読み込まれません。

@media screen and (min-width: 704px) and (max-width: 1055px){
  .content{
    margin:180px;
  }
}

上記の様に記述すればブラウザのwidthが704px以上1055px以下の時はcontentクラスがmargin:180px読み込まれます。 ブラウザがそれ以外のwidthだと読み込まれません。
この利便性に感謝です。