CSSのメディアクエリは非常に便利で協力な機能。
使いこなして最新の機能をCSSで実現しよう
レスポンシブデザインで必須のサイズ判定
@media (max-width:768px){
body{
border:1px solid blue;
}
}
@media (max-width:500px){
body{
border:1px solid red;
}
}
横幅768pxで、bodyタグが青枠になり、
横幅500pxで、bodyタグが赤枠になります。
ブラウザの縦横を判定
@media (orientation:landscape){
body{
width:100%;
height:100%;
transform: rotate(0deg);
}
}
@media (orientation:portrait){
body{
width:100vh!important;
height:100vw!important;
transform: rotate(90deg);
transform-origin: 50vw;
}
}
横サイズのみにしたい場合は、縦横判定をして、transformでrotateをセットすればいい。