screen orientation css

1 @media screen and (orientation:portrait) { … }
2 @media screen and (orientation:landscape) { … }

1/* For portrait, we want the tool bar on top */
2
3@media screen and (orientation: portrait) {
4  #toolbar {
5    width: 100%;
6  }
7}
8
9/* For landscape, we want the tool bar stick on the left */
10
11@media screen and (orientation: landscape) {
12  #toolbar {
13    position: fixed;
14    width: 2.65em;
15    height: 100%;
16  }
17
18  p {
19    margin-left: 2em;
20  }
21
22  li + li {
23    margin-top: .5em;
24  }
25}
26

1@media (orientation: portrait) {
2  body {
3    flex-direction: column;
4  }
5}

1@media screen and (min-width: 0px) and (max-width: 1204px) and (orientation: landscape) {
2  html {
3    transform: rotate(-90deg);
4    transform-origin: left top;
5    width: 100vh;
6    overflow-x: hidden;
7    position: absolute;
8    top: 100%;
9    left: 0;
10  }
11}