45 lines
No EOL
1.9 KiB
Markdown
45 lines
No EOL
1.9 KiB
Markdown
+++
|
|
title = "fully responsive web design"
|
|
summary = "my pipe dream is to redesign my website to be fully responsive -- not across mere pixel widths, but by aspect ratio and overall size"
|
|
date = 2018-04-22T10:42:00-05:00
|
|
updated = 2024-11-11T05:58:10-06:00
|
|
source = "https://mastodon.social/@trwnh/99903847448978099"
|
|
+++
|
|
|
|
my pipe dream is to redesign my website to be fully responsive -- not across mere pixel widths, but by aspect ratio and overall size.
|
|
|
|
does anyone consider what their website looks like when it's fullscreened across one of those samsung 3840x1080 monitors? probably not, and why would you?
|
|
|
|
but i do
|
|
|
|
---
|
|
|
|
## refinement
|
|
|
|
let's say the base case is when the aspect ratio is square
|
|
|
|
you can set width-based breakpoints as usual, but logically extend your approach to multiple different media query sets
|
|
|
|
- one height-based breakpoint for when there is less than some minimum required height? ("too small" mode)
|
|
- one for when there is less than a square aspect ratio (landscape mode)
|
|
- one for everything beyond that (portrait mode)
|
|
|
|
so you might have for example assuming liberal use of breakpoints:
|
|
|
|
- min-width 320, min-height 320
|
|
- min-width 400, min-height 320
|
|
- min-width 400, min-height 400
|
|
- min-width 480, min-height 320
|
|
- min-width 480, min-height 480
|
|
- min-width 600, min-height 320
|
|
- min-width 600, min-height 600
|
|
- min-width 800
|
|
- min-width 960
|
|
- min-width 1150
|
|
- min-width 1320
|
|
- min-width 1560
|
|
- ...
|
|
|
|
notice we stopped taking height into account past a certain point, because we are assuming the page content is flowing vertically and will overflow the viewport in the vertical direction. if we were designing a site that flowed horizontally then we would continue in the height axis (and perhaps cap off the width queries at some point instead).
|
|
|
|
for more extreme widths it becomes more interesting to consider those horizontal flows although it should be recognized that this is niche. |