Is there a way to gain responsive web design directly through javascript

Question

I'm building a website, and in one portion, I'm building up the pages using JavaScripts createElement attributes. I have everything nice and pretty for a web browser, and it's to my liking for sure, but I need it to scale down for mobile devices and I'm having trouble finding this information online.

I know with CSS this is possible using the @media(max-width: ****) , but is there a javascript equivalent to doing this?

I am not 100% familiar with jQuery as of yet, but I can understand the code well enough, so if there's jQuery code to use for this, I'd be willing to try it,

thanks for any helps!

Answer 1

All of your styling should be done with CSS not javascript.

You can look at Bootstrap (css framework) it makes developing responsive websites easy.

Answer 2

You are able to check if the actual window is a mobile device, and after that you can use setAttribute to make your custom CSS.

The Window interface's matchMedia() method returns a new MediaQueryList object representing the parsed results of the specified media query string. The returned MediaQueryList can then be used to determine if the Document matches the media query, or to monitor a document to detect when it matches or stops matching the media query.

Answer 3

You can try

$(window).resize(function(){
    if ($(window).width() <= 800){  
        // do something here
    }   
});

From this article, it mentioned why this approach is not the best way. Check it out for more.

There are other great options for managing Javascript when using CSS media queries in a responsive website. MediaCheck, Window.matchMedia() all allow you to fire javascript functions based on customizable breakpoints in browser width.

I hope this helps.

Answer 4

Timesaving options to use: 1. Javascript + CSS Media queries 2. Bootstrap CSS framework - Simple and very effective

It is possible to control the size of the screen using resize function with window.width.