レスポンシブなCSSでPC/SPの表示を切り替えたい場合、以下のように、
display:none
display:block
を指定しなおすことで実現するのが一般的だが、
例えばpcでdisplay:flexだった要素をspでdisplay:none
にした場合は、一律にdisplay:blockに戻してしまうと表示が崩れてしまう。
.sp {
display: none;
}
.pc {
display: block;
}
@media (max-width: 481px) {
.sp {
display: block;
}
.pc {
display: none;
}
}
そこで、元の要素のdisplay要素を以前のまま保持するには以下のように指定するとよい。
@media (min-width: 481px) {
.sp {
display: none;
}
}
@media (max-width: 480px) {
.pc {
display: none;
}
}