How to initiate a media query on user request using javascript

Question

I have a responsive webpage with a different design for different screen sizes, I use @mediaquery to change my design. I want to give the user the opportunity to change the design for a smaller or larger screen size, even if the screen size has not changed.

Is it possible to run @mediaquery with js without resizing sceen?

Answer 1

Check out Enquire.js , a lightweight, clean JavaScript library for responding to CSS multimedia requests.

With it, you can add a class to the body depending on the width of the screen. If you then organize your CSS based on whether the body has a particular class or not. You can use JS to dynamically add these classes to the body based on user choices.

You can do the same with another JS: MediaClass library , the following JS line:

 MediaClass("small-screen", "body(this-max-width: 480px)"); 

adds a small-screen class to the body tag if the width of the body less than 480px . Now you can add a few buttons to your site that change the width of the body and based on the fact that the layout of your page changes if you have your CSS classes configured in this way, and not just “only” based on the screen size. Thus, you will need to slightly reorganize your CSS for both of these approaches.