I have adopted a style where I use 3 style sheets. A main style sheet that applies to all devices. Then a style for portrait orientation and one for landscape orientation. When I link the style sheets in the head I use media queries so only the necessary style sheet loads depending on the screen orientation. So like <link rel="stylesheet" href="styles/landscape.css" media="(orientation:landscape)">. This way not all the css is downloaded unless it is needed. So if a person views the website on a laptop then the portrait.css will not he downloaded etc. It gives a slight performance boost.
I have adopted a style where I use 3 style sheets. A main style sheet that applies to all devices. Then a style for portrait orientation and one for landscape orientation. When I link the style sheets in the head I use media queries so only the necessary style sheet loads depending on the screen orientation. So like <link rel="stylesheet" href="styles/landscape.css" media="(orientation:landscape)">. This way not all the css is downloaded unless it is needed. So if a person views the website on a laptop then the portrait.css will not he downloaded etc. It gives a slight performance boost.
What if the user is on mobile and rotates their phone?