画面サイズによる、CSSの使い分け
@media only screen and (max-width: 979px) {
Html{
Width:100%;
}
} /*デバイスの横幅が979px以下の場合*/
@media only screen and (min-width: 321px) and (max-width: 768px) {
Html{
Width:100%;
}
} /*デバイスの横幅が321以上768以下の場合*/
@media only screen and (max-width: 320px) {
header{
Width:90%;
}
} /* デバイスの横幅が320px以下の場合 */
viewport を設定する
<meta name="viewport" content="パラメーター名=値, ..." />
- width : コンテンツ幅をデバイスの幅に合わせる
- width=device-width : コンテンツ幅をデバイスの幅に合わせる
- initial-scale=1 : 初回時の拡大率
- content="width=device-width /*端末画面の幅に合わせる*/
- initial-scale /*初期のズーム倍率*/
- minimum-scale /*最小倍率*/
- maximum-scale /*最大倍率*/
- user-scalable : ズームの操作
- yes : 許可する （初期値）
- no : 許可しない
最終更新：2016年12月25日 17:02
