diff options
author | bt <bt@web> | 2023-12-11 18:35:43 -0500 |
---|---|---|
committer | IkiWiki <ikiwiki.info> | 2023-12-11 18:35:43 -0500 |
commit | 04c31d1e4655cff471cc572d065eaf27ad78eeda (patch) | |
tree | e2a46bde9c6232a0947f0f9ba5d2f5e6b159203e /posts | |
parent | 692dd0ef089a72d8772ad083af81fc8540bd537e (diff) |
Diffstat (limited to 'posts')
-rw-r--r-- | posts/dv.md | 7 |
1 files changed, 3 insertions, 4 deletions
diff --git a/posts/dv.md b/posts/dv.md index 476cdf9..ea1b52b 100644 --- a/posts/dv.md +++ b/posts/dv.md @@ -1,6 +1,5 @@ -# Dynamic Viewports with CSS - -2023-02-08 +[[!meta title="Dynamic Viewports with CSS"]] +[[!meta date="2023-02-08"]] I think it's safe to assume most web designers and developers are familiar with the standard `vh` and `vw` parameters in CSS. These parameters are used for setting an element's height and/or width, relative to the viewport (v) height (h) or width (w). For example: @@ -46,4 +45,4 @@ So our examples above would translate into: **Note:** Even though the caniuse page states that Firefox 109+ and iOS Safari 16.3 do not support `dvh`, in my experiments they do. I'm not sure what testing was done for those two browsers, so YMMV. -If you want to play it safe, use dynamic viewports with standard "traditional" viewports as backup. That way you support all use cases while still taking advantage of newer CSS properties.
\ No newline at end of file +If you want to play it safe, use dynamic viewports with standard "traditional" viewports as backup. That way you support all use cases while still taking advantage of newer CSS properties. |