パソコン・iPad・スマートフォン・ガラケーなど、利用する媒体の画面サイズに合ったサイト表示ができるようにすることをレスポンシブデザインといいます。そのレスポンシブデザインのやり方についての説明です。
<meta name=”viewport” content=”width=device-width”>
<link rel="stylesheet" href="PC表示の際に読み込むCSSのファイル名" media="screen and (min-width: 601px)">
<link rel="stylesheet" href="スマホ表示の際に読み込むCSSのファイル名" media="screen and (max-width: 600px)">
body {
max-width: 960px;
margin: 0 auto;
padding: 0 3vw
}
スマホ表示のときのみ<br class="pc_none">改行させます。
.pc_none {
display: none
}