CSS 32 💻 aspect-ratio and color media features

a - aspect-ratio media feature
aspect-ratio media feature allows you to apply styles based on the aspect ratio of the viewport
It is useful for creating responsive designs and adapt to different aspect ratios
This way you can design for both portrait and landscape modes
you can also use min-aspect-ratio and max-aspect-ratio for minimum and maximum values
@media (aspect-ratio: 16/9) → Media query for aspect ratio 16:9
it changes the background-color(from red), width and height properties
@media (max-aspect-ratio: 3/2) → Media query for minimum aspect ratio 3/2
@media (min-aspect-ratio: 4/3) → Media query for maximum aspect ratio 4/3

b - color media feature
color media feature allows you to apply styles based on the number of bits per color component(RGB)
The value must be an integer but you can also add mathematical operators like less,greater, =
For example color greater= 12
0 values is for not color device
You can also use min-color and max-color media feature
@media (color) → applies when is a color device
@media (min-color: 32) → applies when at minimum 32 bits per color component
@media (max-color: 32)  → applies when at maximum 32 bits per color component

---

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!