CSS フレームワーク Pure では em をメディアクエリーに使っている。そして、「モバイルファースト」方式なので、メディアクエリーは min-width 指定を使ってこんな感じになる。

@media screen and (min-width:64em) {
	...
}

さてこの Pure を使ってWebサイトを作る時、Bootstrap にあるような .hidden-lg-down といった、「幅 xx 以下のデバイスでは隠す」や .hidden-md-up などの「幅 xx 以上のデバイスでは隠す」というクラスが欲しくなる事がある。

「幅 xx 以上」は簡単で、Pure と同じ em の区切りを使えば良いのだが、「幅 xx 以下」の場合は、max-width に区切りとなる em の数ギリギリの少数を設定する。

こういう感じ。

@media screen and (max-width:63.99em) {
	.hidden-lg-down {display: none;}
}

このemの数値が問題で、なるべく継ぎ目がずれないように 63.99999em としていたら、iPad の Safari（横置き） では 64em と解釈されてしまい、意図通りの表示にならなかった。

うまくいく境界は小数点が 3桁と 4桁の間。63.999em はOK、つまり、iPad 横置きで表示したいものが表示される。63.9999em と指定してしまうと、「max-width:64em」と同じになるらしく、表示したいものが隠れてしまう。

少数は3桁までという事ですね。