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 / 73PV

関連記事