diff options
author | Bradley Taunt <bt@btxx.org> | 2024-07-20 12:13:49 -0400 |
---|---|---|
committer | Bradley Taunt <bt@btxx.org> | 2024-07-20 12:13:49 -0400 |
commit | b810d9a0b47dd49a90cc8ec7bf1b05f59ff945b3 (patch) | |
tree | d4e70797a7c1237a7e8a9be0d025e878d2601160 /posts/dv.md | |
parent | f39a84524d77bcc2a83adfab01716c67cc7e983b (diff) |
Crude testing with blogrb
Diffstat (limited to 'posts/dv.md')
-rw-r--r-- | posts/dv.md | 12 |
1 files changed, 6 insertions, 6 deletions
diff --git a/posts/dv.md b/posts/dv.md index 752f99f..c243eca 100644 --- a/posts/dv.md +++ b/posts/dv.md @@ -6,19 +6,19 @@ I think it's safe to assume most web designers and developers are familiar with If I want my `.box` element to take up the entire height of a device's screen: -```css +~~~css .box { height: 100vh; } -``` +~~~ Or I want my `.box` element to take up the entire width of a device's screen: -```css +~~~css .box { width: 100vw; } -``` +~~~ These are wonderful options to have - specifically for those of us designing web applications. But there are some *minor* issues with `vh` and `vw`. @@ -34,12 +34,12 @@ Lucky for us there exists an awesome *new-ish* CSS API called dynamic viewport-p So our examples above would translate into: -```css +~~~css .box { height: 100dvh; width: 100dvw; } -``` +~~~ ### What About Browser Support? |