モバイルファースト
PCファースト
基礎になるCSSを書いたとき
基礎の部分がファースト
メディアクエリーで書いた方がサブ扱い
@media all and (max-width:500px){
500以下になったら適用してね
なので、これはPCファースト。
いまはモバイルファーストで作られることが基本
@media all and (min-width:560px){/*smaho*/
div{
background-color:#33f;
}
}
@media all and (min-width:960px){/*tablet*/
div{
background-color:#3f3;
}
}
とか
具体的な値を決めるには「ブレークポイント 2020」とかで検索する。
クライアントさんにどこまで必要なのかきいて決める
vhはあまり使用をおすすめしない
高さはそもそも普通指定しない。可変にするのが理想
res.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"><!--レスポンシブ-->
<title>レスポンシブ</title>
<link rel="stylesheet" href="res.css">
</head>
<body>
<div><!--<img src="fish_aburabouzu.png">--></div>
aaaaaaa
</body>
</html>
res.css
@charset "utf-8";
body{
background-color:#fff;
}
div{
width:100%;
height:300px;
background-color:#f55;
background-image:url("fish_aburabouzu.png");
background-size: 100%;
}
/*
img{
width:100%;
}
*/
@media all and (min-width:560px){/*smaho*/
div{
background-color:#33f;
}
}
@media all and (min-width:960px){/*tablet*/
div{
background-color:#000;
}
div.image{
height:50vh;/*縦幅の半分*/
/*height:50%;*/
overflow:hidden;
}
}
