固定値から割合に変換する計算

%単位

%単位は親要素の幅に対する割合で可変する単位です。

モバイル端末のタブレットからスマートフォンまで、1枚のデザインカンプを様々なデバイスサイズで同じように見せるためには％単位などを駆使して幅や要素を可変させる必要があります。

余談ですがwidthとmax-widthを組み合わせるとメディアクエリ(@media)を使わずにレスポンシブ対応が可能になります。
次のサンプルは親要素の幅に対して1200pxになるまで90%で可変し続けるスタイル定義の例です。メディアクエリを使わなくてもモバイルでは可変、デスクトップでは固定を実現させることができ、コンテンツ幅で使用すると便利なのでおすすめです。

.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}
                

vw単位

vwはviewport widthの略でビューポート（ウィンドウ）の幅に対する割合で可変する単位です。

作者はファーストビューなどのビジュアル重視な部分で『要素や文字を画像のように見せたい』『どんなデバイスサイズでも画像のこの位置にこの文字を配置したい』という場合にvw単位をよく使用しています。

以下の画像の例は作者の別のサイトですが、ファーストビューの要素の幅やpadding、font-size、marginにvwを多用していて、どのデバイスサイズでも同じように見せています。