0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

レスポンシブwebデザイン実装方法

Posted at

#導入
レスポンシブデザインをポートフォリで導入したい方向けに記事を作りました。

#目標
 レスポンシブデザインを実装する

#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」で、適応させます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?