There are many like it, but this one by Malte Wassermann is a really good one. It goes the extra mile, for example, by injecting the correct meta tags, sending the right user agent, and refreshing the page in its newly resized viewport.<\/p>\n","protected":false},"excerpt":{"rendered":"
There are many like it, but this one by Malte Wassermann is a really good one. It goes the extra mile, for example, by injecting the correct meta tags, sending the right user agent, and refreshing the page in its newly resized viewport.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":346316,"url":"https:\/\/css-tricks.com\/the-large-small-and-dynamic-viewports\/","url_meta":{"origin":19314,"position":0},"title":"The Large, Small, and Dynamic Viewports","date":"August 9, 2021","format":false,"excerpt":"We've got viewport units (e.g. vw, vh, vmin, vmax), and they are mostly pretty great. It's cool to always have a unit available that is relative to the entire screen. But when you ask people what they want fixed up in CSS, viewport units are always on the list. The\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/viewports-teaser.png?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":344273,"url":"https:\/\/css-tricks.com\/how-to-get-a-pixel-perfect-linearly-scaled-ui\/","url_meta":{"origin":19314,"position":1},"title":"How to Get a Pixel-Perfect, Linearly Scaled UI","date":"July 15, 2021","format":false,"excerpt":"Dynamically scaling CSS values based on the viewport width is hardly a new topic. You can find plenty of in-depth coverage right here on CSS-Tricks in articles like this one or this one. Most of those examples, though, use relative CSS units and unitless values to achieve fluid scaling. That\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/s_801F1F8B02DD1D1B01F3A8CD432798C49451FBC222AD086C6E92AE6397AC3E1B_1624719394166_image.png?fit=1200%2C750&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305453,"url":"https:\/\/css-tricks.com\/css-viewport-units\/","url_meta":{"origin":19314,"position":2},"title":"CSS Viewport Units","date":"March 25, 2020","format":false,"excerpt":"Deep dive from Ahmad. I like the coverage of vmin and vmax, which I think I don't reach for as often as I should. I'm thinking that if you are doing something highly directional (e.g. a full bleed trick), then directly using vw is necessary. On the other hand, if\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/vmin-vmax-units.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":374894,"url":"https:\/\/css-tricks.com\/a-couple-changes-coming-in-chrome-108\/","url_meta":{"origin":19314,"position":3},"title":"A Couple Changes Coming in Chrome 108","date":"November 4, 2022","format":false,"excerpt":"\"A change to overflow on replaced elements in CSS\": From Chrome 108, the following replaced elements respect the overflow property:\u00a0img,\u00a0video\u00a0and\u00a0canvas. In earlier versions of Chrome, this property was ignored on these elements.This means that an image which was earlier clipped to its content box can now draw outside those bounds\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/chrome-browser-extension-blueprint.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":252583,"url":"https:\/\/css-tricks.com\/fun-viewport-units\/","url_meta":{"origin":19314,"position":4},"title":"Fun with Viewport Units","date":"June 5, 2017","format":false,"excerpt":"Viewport units have been around for several years now, with near-perfect support in the major browsers, but I keep finding new and exciting ways to use them. I thought it would be fun to review the basics, and then round-up some of my favorite use-cases. What are viewport units? Four\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":343139,"url":"https:\/\/css-tricks.com\/working-around-the-viewport-based-fluid-typography-bug-in-safari\/","url_meta":{"origin":19314,"position":5},"title":"Working around the viewport-based fluid typography bug in Safari","date":"June 28, 2021","format":false,"excerpt":"Sara digs into a bug I happened to have mentioned back in 2012 where fluid type didn't resize when the browser window resized. Back then, it affected Chrome 20 and Safari 6, but the bug still persists today in Safari when a calc() involves viewport units. Sara credits Martin Ausw\u00f6ger\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/fluid-type.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/19314"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=19314"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/19314\/revisions"}],"predecessor-version":[{"id":19328,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/19314\/revisions\/19328"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=19314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=19314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=19314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}