はじめに こんな方に読んで欲しいです。 スタイルを作成する時に 色んなデバイスを考慮するのがめんどくさい レスポンシブなフレームワークを使っても、デバイスサイズによって改行位置とかが微妙にずれてきになる PCとSPでカラム数を変える必要がない 1カラムを想定している 解像度が高いPCだとコンテンツに対する余白の割合が多すぎて気になる この記事で紹介する方法を用いると 固定幅のデザインを1つ作成するだけでOK どんなデバイスでも同じ見栄えになる それでは… 仕組み 仕組みはっても単純です。 例えば幅1000pxのページをデザインしたとします。そしたらjsがウィンドウサイズに応じて適切な倍率を計算して設定してくれます。 ウィンドウサイズが1000pxの時は何もしない ウィンドウサイズが2000pxの時は200%にする ウィンドウサイズが500pxの時は50%にする 値は極端ですが、イメージでき
![ウィンドウサイズに応じて倍率を自動調整する.js - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/5311fc0ab352963188a386591c25a8ec0ebe40bb/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgyJUE2JUUzJTgyJUEzJUUzJTgzJUIzJUUzJTgzJTg5JUUzJTgyJUE2JUUzJTgyJUI1JUUzJTgyJUE0JUUzJTgyJUJBJUUzJTgxJUFCJUU1JUJGJTlDJUUzJTgxJTk4JUUzJTgxJUE2JUU1JTgwJThEJUU3JThFJTg3JUUzJTgyJTkyJUU4JTg3JUFBJUU1JThCJTk1JUU4JUFBJUJGJUU2JTk1JUI0JUUzJTgxJTk5JUUzJTgyJThCLmpzJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mYjY3ODYxYTA5OTFmZWMyNWEwZGU5ZjcwMGUyMGJhMQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzb3phaXlhJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz02NWZlOTBlZDAzMzdmMWZkYjFkZTc5NTUwNGVlYjZhNg%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D452be7d662420f70d2280b2bb160e2a1)