Responsive vs Adaptive Design
in
#CSS with Media Queries
Saw bad advice, wanted to share my thoughts..
(see attached code)
[aside] 🤓
HTML & JavaScript can help designs adapt *even more* via support for translation, screen readers, keyboard, gamepad, touch, print and much more!
ALT /* Viewport Size */
@media (max-width: 320px) { … }
@media (width <= 320px) { … }
@media (320px <= width <= 768px) { … }
@media (aspect-ratio: 16/9) { … }
/* Viewport Orientation */
@media (orientation: portrait) { … }
ALT /* User Settings */
@media (prefers-color-scheme: dark) { … }
@media (prefers-color-scheme: light) { … }
@media (prefers-reduced-motion: no-preference) { … }
@media (prefers-reduced-data: no-preference) { … }
@media (prefers-contrast: more) { … }
/* Device Capabilities */
@media (dynamic-range: high) { … }
@media (resolution: 300dpi) { … }
@media (hover) { … }
@media (pointer: fine) { … }
/* Browser Capabilities */
@supports (grid: 1fr / 1fr) { … }