What I want to do is to be able to programmatically scale a page up or down and the tricky part is that I want the media queries to be scaled at the same rate as well. 

So if I scale up everything in a page by a factor of 2, a media query that used to fire at 400px should now fire at 800px.

**Things I tried:**

* Setting the css zoom property on the html or body element (`zoom: 2`):

This does not scale the media queries. A media query that used to fire at 400px will still fire at 400px. If I use the zoom controls of the browser to scale up a page then the media queries scale proportionally, but this does not happen with the zoom css property. Also Firefox doesn't support *zoom* and using `transform: scale(2)` doesn't give the desired results either. 

* Using rem units for everything, including the media queries and then changing the base font-size of the html element to scale everything up or down proportionally.

This works for every element but not for the media queries. Apparently rem units in media queries use the default font-size of the browser (usually 16px) and not the base font-size set on the html element.

* Using Calc and CSS variables in media queries

I tried to do something like: 

```
@media only screen and (max-width: calc(400px * var(--scale-factor))

```

But no browser currently has support for calc and css variables in media queries. 

The only solution I found is to totally scrap css media queries and use Javascript to simulate the effect, but that takes a lot more code and doesn't seem like an elegant solution. I wouldn't mind using a bit of Javascript as part of the solution but scrapping media queries and doing it in a completely different way seems a bit extreme for something that should be quite simple. 

Any suggestions?