レスポンシブ対応にメディアクエリなしで、CSSの関数で定義！border-radiusの値を変えるテクニック

border-radiusの値をデスクトップとスマホで変える、例えばビューポートが大きくてマージンがある場合は8pxで角丸にし、ビューポートが小さくてマージンがない場合は0pxで矩形にする。 メディアクエリで簡単に実装できると思うかもしれません。しかし、ビューポートのサイズが小さく、マージンがある場合に8pxの角丸になりません。 この難しい条件をCSSの関数で実装するテクニックを紹介します。 Conditional Border Radius In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに border-radiusの値をスマホとデスクトップで変えるテクニック 実装方法の解説 なぜ、9999を使用するのか 終わりに はじめに 私はデベロッパーがどのようなCSSを書いている

[coliss]

CSSのmin()関数とmax()関数を使用したレスポンシブ対応の実装方法。

[nicht-sein]

これ面白いけれど保守性がないなｗ

[Shinwiki]

まだまだ汚くしろと

[toblog]

何やってるのかぱっと見でわからない。しかしこれを発想した人すご。

[Phenomenon]

面白いけどハッキーだなあ