Photo by
mericanadesico
スマートフォン対応のコーディング
viewportの設定
/*viewport=表示領域*/
/*縮小を行わせないようにするために、viewportのサイズとデバイス画面のサイズを同じにする*/<head>
<meta name="view port" content="width-device-width,initial-scale=1.0">
<title>シングルページレイアウト</title>
<link rel="stylesheet" href="https://xxxx">
/*width=device-scale*/
/*initial-scale=1.0*/content属性にズームを設定する
/*headのmeta要素に追加*/
initial-scale(初期ズーム率)
minimum-scale(最小ズーム率)
maximum-scale(最大ズーム率)
user-scalable(ズームの可否)メディアクエリによるレスポンシブwebの実現
/*メディアクエリ=閲覧環境によってCSSの有効・無効を切り替える*/
/*条件を指定したいCSSを別ファイルに切り出し、HTMLから読み込む*/
<link rel="stylesheet" href="print.css" media="print">
/*条件を指定したいCSSを別ファイルに切り出し、CSSから読み込む*/
/*CSSファイル内で@importを使用し、別のCSSを追加し、条件によって読み込む*/
@import url(print.css)print;
/*条件を指定したいCSSを同じファイルに記述し、メデイアクエリの構文で囲む*/
/*ファイルを切り分けず条件を記述したメディアクエリの構文で囲む*/
/*デフォルトのスタイル*/
.sample{
color:red;
}
/*印刷時に適応するスタイル*/
@media print{
.sample{
color:black;
}
}メディアクエリの条件：メディア特性
width:viewportの幅
device-width:デバイスの幅
以上のような判定式に使用できる条件→メディア特性
@media (width:320px){ /*viewportの幅が320pxの場合に適応される*/
.sample{
color:red;
}
}
@media (min-width:320px){ /*viewportの幅が320px以上の幅に適応される*/
.sample{
color:blue;
}
}
@media (max-width:320px){
.sample{
color:yellow;
}
}メディアクエリに指定できる条件の種類
width/min(max)-width/*デバイスが描画できる領域の横幅*/
height/min(max)-height/*デバイスが描画できる領域の高さ*/
aspect-ratio/min(max)-aspect-ratio/*デバイスが描画できる範囲のアスペクト比*/
device-width/min(max)-device/*デバイス自体の横幅*/
device-height/min(max)-device-height/*デバイス自体の高さ*/
device-aspect-ratio/min(max)-aspect-ratio/*デバイス自体のアスペクト比*/
orientation/*デバイスの向き。landscape(横向き)かportrait(縦向き)を指定*/
resolution/*デバイスの解像度*/
/*1インチあたりのドット数を表すdpiまたは1センチあたりのドット数dpcmを用いる*/