cssをディスプレイサイズで切り替えるメモ

以下は丸ごとcssを切り替える場合
--------------------------------
<link rel="stylesheet" href="./css/s.css" type="text/css"
media="screen and (max-width: 414px)">
<link rel="stylesheet" href="./css/pc.css" type="text/css"
media="screen and (min-width:415px)">

1枚のcss内で画面サイズごとに別の指定をする場合
--------------------------------
@media screen and (max-width:799px) {
#main_contents_box{
width:100%;
height:
z-index:100;
overflow:hidden;
}
}
@media screen and (min-width:800px) {
#main_contents_box{
width:calc(100% - 260px);
height:calc(100vh - 120px);
z-index:100;
position:absolute;
top:60px;
left:260px;
overflow:hidden;
記事id:856 / 655PV

関連記事