残念ながら%では表現できないので、px単位で調整するしかありません。
そのデザインを複数のデバイス幅にあわせるには、どんな方法が良いでしょう?

viewportでwidthを指定する

真っ先に思いつくのがviewportです。これで対応可能であれば、使いましょう。

対応端末の範囲にあるAndroidで想定通り動かない場合、すでに決まったviewportを使用しなくてはいけない場合、別の方法にします。

CSSとJavaScriptで拡大縮小させる

やはり、JavaScriptで拡大縮小率を出して、CSSに適用させるのが現実的です。
使えるプロパティは2つあります。

zoomを利用する

非標準のプロパティですが、モバイル標準ブラウザであれば、だいたい使えます。

ネイティブだと色々と長くなりますが、jQueryなら楽です。

注意

文字の最小サイズが設定されているのか、小さい文字が忠実に縮小されないです。
非標準なプロパティなので、再現できないブラウザがあることを頭に入れておきましょう。

transformを利用する

transformも原理は同じで、jQueryならprefixも不要です。

リサイズするコンテンツには、これを入れておきます。

注意

transformは、コンテンツが拡大縮小しても元は変わらないので、工夫が必要です。

横幅を基本にして拡大縮小させるはずですが、そうすると高さが大きすぎたり、足りなかったりするので、高さを指定して対応します。

画像を利用する

拡大縮小する範囲と同じ大きさの背景画像を用意するコンテンツであれば、その背景画像をimgとして配置すると良いです。

背景として置く画像は、scriptでリサイズするものとは別にwidth=”100%”で可変させる必要があります。

JavaScript コードレシピ集
技術評論社 (2019-01-25)
売り上げランキング: 7,050

まとめ

そんなに多い依頼ではないですが、長く使えるパターンだったので、メモします。それでは、また!