Merge branches 'write-memoize-from-scratch' and 'main' of https://git…

…hub.com/benjamminj/portfolio into write-memoize-from-scratch

writing/using-rem-based-media-queries.mdx

@@ -0,0 +1,26 @@
+---
+title: Using rem-based media queries
+date: 2020-09-29
+tags:
+  - css
+---
+
+One of my favorite CSS "tricks" is the `rem`-based media query:
+
+```css
+@media screen and (min-width: 48rem) {
+  /*  Styles for tablets and above */
+}
+```
+
+Instead of using pixels for the width of the screen, you can define the width of the screen using `rem` units. One key benefit to this is **accessibility**.
+
+I often bump my font size up larger than the default. While I can see fine without it I find the larger font sizes relaxing on my eyes.
+
+Writing media queries like this allows you to scale layout with a user's font-sizing preferences. So if your user has a tablet screen (~768px) and a 150% font size, they would see the _mobile_ layout. This mobile layout is more helpful if your font is taking up a significant portion of your tablet-sized screen width.
+
+Lastly, a couple caveats to this approach. First, if you're actually changing the `font-size` on the `html` element, this might not be for you. Personally, I've never had to actually change the root `font-size` dynamically so this is rarely a concern for me.
+
+Second, `rem`-based media queries can take a while to get used to. You'll have to do some math if you need to figure out standard screen sizes. For example, `768px` divided by a root font-size of `16` results in `48rem`. That said, I think the benefits (accessibility) outweigh the cost (unfamiliarity).
+
+Thanks for reading! Let me know if you enjoyed this—you can reach out to me on [Twitter](https://twitter.com/benjamminj) or connect with me on [LinkedIn](https://www.linkedin.com/in/benjamin-d-johnson/) (make sure to mention this post if you do connect!)