For example, children of this Media declaration will only be visible if the viewport width is between 768 and 1192 (1192 not included) points:

Fresnel lens

If it is not possible to achieve the desired  flatness with the chosen coating technique or design there are two further options but some more effort is required: A specially designed coating on the rear surface can compensate the stress of the main coating. This rear side coating can also be optimized for extra features like a high transmission pass band.The most extensive way for stress compen­sation is to use pre-curved substrates. They ha­ve to be manufactured with a curvature adap­ted exactly to the computed stress of the coat­­ing, so standard substrates cannot be used anymore.

For example, children of this Media declaration will only be visible if the viewport width is equal or greater than 1024 points:

It's impossible to reliably know the user's current breakpoint during the server render phase since that requires a browser.

For example, children of this Media declaration will only be visible if the viewport width is between 0 and 768 (768 not included) points:

Use this to declare that children should only be visible while the viewport width is equal to the start offset of the specified breakpoint or greater.

And that's it! To test, disable JS and scale your browser window down to a mobile size and reload; it will correctly render the mobile layout without the need to use a user-agent or other server-side "hints".

Fresnel equation

While the Basic and SSR examples will get one pretty far, @artsy/fresnel can do a lot more. For an exhaustive deep-dive into its features, check out the Kitchen Sink app.

Use this to declare that children should only be visible at a specific breakpoint, meaning that the viewport width is greater than or equal to the start offset of the breakpoint, but less than the next breakpoint, if one exists.

Fresnel diffraction

If you would like to avoid the underlying div that is generated by and instead use your own element, use the render-props form but be sure to not render any children when not necessary:

If you don't want to release on a particular PR but the changes aren't trivial then use the Skip Release tag along side the appropriate version tag.

The MediaContextProvider component influences how Media components will be rendered. Mount it at the root of your component tree:

Major, minor, and patch will cause a new release to be generated. Use major for breaking changes, minor for new non-breaking features, and patch for bug fixes. Trivial will not cause a release and should be used when updating documentation or non-project code.

The browser receives markup with proper media query styling and will immediately start rendering the expected visual result for whatever viewport width the browser is at.

Fresnel Blender

In the React ecosystem a common approach to writing declarative responsive components is to use the browser’s matchMedia api:

When all JS has loaded and React starts the rehydration phase, we query the browser for what breakpoint it’s currently at and then limit the rendered components to the matching media queries. This prevents life-cycle methods from firing in hidden components and unused html being re-written to the DOM.

Use this to declare that children should only be visible while the viewport width is equal or greater than the start offset of the next breakpoint.

For example, children of this Media declaration will only be visible if the viewport width is between 0 and 1024 (1024 not included) points:

Besides the Media and MediaContextProvider components, there's a createMediaStyle function that produces the CSS styling for all possible media queries that the Media instance can make use of while markup is being passed from the server to the client during hydration. If only a subset of breakpoint keys is used those can be optional specified as a parameter to minimize the output. Be sure to insert this within a