@media rule thresholds do not account for browser font size setting

### Have you read the Contributing Guidelines on issues?

- [X] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#issues).

### Prerequisites

- [X] I'm using the latest version of Docusaurus.
- [X] I have tried the `npm run clear` or `yarn clear` command.
- [X] I have tried `rm -rf node_modules yarn.lock package-lock.json` and re-installing packages.
- [X] I have tried creating a repro with https://new.docusaurus.io.
- [X] I have read the console error message carefully (if applicable).

### Description

Most things in docusaurus scale with `rem` units, but the thresholds for `@media` rules are set in `px`. Which means setting a large font size in the browser effectively "zooms in" the page, but the `@media` rules do not trigger like they would with actual zoom.

Screenshots below are from the page https://docusaurus.io/docs/styling-layout with the same zoom level (100%) and viewport size (~1000px). The large font size breaks the layout.

| normal font size|large font size |
|----|----|
|||

### Reproducible demo

https://docusaurus.io/docs/styling-layout

### Steps to reproduce

1. Go to https://docusaurus.io/docs/styling-layout
2. Set viewport width to ~1000px, just before the `@media` rule triggers
3. Set large font size in the browser
4. Observe the broken layout

### Expected behavior

IMHO it would make sense to use `rem` unit for `@media` thresholds as it would represent the "actual" scale of the content (accounting for both zoom and browser font size).

### Actual behavior

TOC on the right was unreasonably squished and navbar at the top has overlapping text. Normally with the content being enlarged this much a `@media` rule would trigger, but it does not happen because the threshold is tied to `px` and is not aware of browser font size setting.


### Your environment

Link: https://docusaurus.io/docs/styling-layout
Browser: Brave 1.58.137
OS: Windows 11

Also tried locally with `npx create-docusaurus@latest my-website classic` (pulled version 2.4.3), same result.

### Self-service

- [ ] I'd be willing to fix this bug myself.