レスポンシブ
レスポンシブについて
「viewport」の指定をする
<meta name="viewport" content="width=device-width,initial-scale=1">
フォントサイズの指定をする
横並びのコンテンツを縦並びにする
画像だけではなく、サイト全体的に可変を意識してサイズを%で指定します。
html {
font-size: 62.5%; /*基準フォントサイズを10pxにするという意味*/
}
body {
font-size: 14px;
font-size: 1.4rem;
}
/*pxとremの両方を指定していますが、
remを利用できないブラウザを考慮してpxとrem両方で指定しています。*/
h1 {
font-size: 4rem; /* 40px */
}
p {
font-size: 1.4rem; /* 14px */
}
メディアタイプ
screen(一般的ディスプレイ)、projection(プロジェクター)、
print(プリンタ)、tv(テレビ)、all(すべて)など
記述の仕方(例)
@media メディアタイプ { /*そのメディアでのみ有効となるスタイル*/ }
小~大の順番(モバイルファースト) 大〜小の順番(デスクトップファースト)で記載しなければならない。
携帯、タブレット、PCのブレイクポイントの分岐が必要である。
@media screen and (min-width:480px) {
/* 画面サイズが480pxからはここを読み込む */
}
@media screen and (min-width:768px) and max-width:1024px) {
/* 画面サイズが768pxから1024pxまではここを読み込む */
}
@media screen and (min-width:1024px) {
/* 画面サイズが1024pxからはここを読み込む */
}
Author And Source
この問題について(レスポンシブ), 我々は、より多くの情報をここで見つけました https://qiita.com/masaki1117/items/dab494f96d45e3ee586e著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .