導入
レスポンシブデザインをポートフォリで導入したい方向けに記事を作りました。
目標
レスポンシブデザインを実装する
viewportを設定する
views/layouts/application.html.erb
<head>
<title>APPNAME</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
#下記の一文を追加
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
contentプロパティにwidth="device-width"を指定することで、PCやスマートフォンなどの画面の大きさに合わせることができます。
initial-scaleは、画面の拡大率のことで、「1.0」に設定しているため、拡大は行われません。
画面サイズによってCSSを切り替える方法
css
@media (max-width: 500px) {
p {
font-size: 10px
}
}
「max-width: 500px」の部分は「画面幅が最大500pxのとき」という意味になるので、「画面幅が500px以下のとき」という意味になります。
css
@media (min-width: 500px) {
p {
font-size: 10px
}
}
「min-width: 500px」の部分は「画面幅が最低500pxのとき」という意味になるので、「画面幅が500px以上のとき」という意味になります。
補足
タブレットは「1000px」、スマホは「500px」で、適応させます。