IE11のためにもMedia Queriesはネストで書かないような優しさを持ちたい

レスポンシブなサイトでメディアクエリを細かく設定する必要があったので、下記のように記述をしていたところ、チェックした際にIE11でネスト内のStyleが反映されていないことに気がついた。

/*IEで適切に反映されないパターン*/
@media screen and (min-width 750px){
  ...
  @media screen and (max-height 1200px){
    ...
  }
}

とうやらネストでのメディアクエリはサポートしているブラウザとそうでないブラウザがあるとの情報があった（非公式）。

stackoverflow.com

ちなみに　MS Edge 40.15063.0.0 では問題なく反映されていた。明示的にどのブラウザでサポートしている、という情報はなかったが、最新（2017年現在）のIEで動いていないということで、面倒でも個別に条件を分ける必要があるようだ。

/*IEでも適切に反映されるパターン*/
@media screen and (min-width 750px)　{
  ...
}
@media screen and (min-width 750px) and  (max-height 1200px){
  ...
}