以不同的缩放级别或屏幕尺寸渲染元素

Question

I'm creating a (react) component library for documentation and testing purposes for our company. A kind of style guide. Some of our components have styles that depend on media queries to scale up and down nicely.

Our style guide site is responsive but I would like to be able to render different screen sizes. As an example, I wanted to show how the site header looks like in desktop and mobile without having to resize the window , as if they were multiple iframes with different zoom levels.

So I was thinking if it was somehow possible to make html elements think they are being rendered in a larger or smaller screen by changing their zoom level. A sort of scaling, while staying within the same limits.

Answer 1

In google chrome there is a tool who do this.

Right Click > Inspect the element > The mobile icon at the top corner right

Check my screenshot below.

Cheers mate ;)