@mediaの条件でCSSを適用・変更する

デバイスが横向きの時

メディアクエリのorientation: landscapeを使う。

@media (orientation: landscape){
  ここに記述
}

デバイスが縦向きの時

@media (orientation: portrait){
  ここに記述
}

画面が横向きで画面の横幅が〇〇px以下の場合

and で条件を追加する。

@media (orientation: landscape) and (max-width: 〇〇px){
  ここに記述
}

参考：デバイスの向きによってCSSを変更する方法

SafariのみにCSSを記述する

最新のsafari用

_::-webkit-full-page-media, _:future, :root .text {
	color: red;
}

古いsafari用

@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, .text {
		color: red;
	}
}

参考：SafariのみにCSSを適用する記述方法