Do I need to use javascript to create responsive layout?

Question

I downloaded a few free layouts (you can find them simply through google if you are interested), and I see that there are at least one or two javascript files in the layout.

Question: Is javascript necessary to create a responsive layout?

Then the answer to this question is “no”, and you also have the opportunity to link a free responsive layout made only with html and css, well, you will receive a wonderful BIG gratitude.

Answer 1

The whole responsive layout is that it can (and should) be executed only with CSS3 requests.

However, this often requires some clever HTML design, especially if you want to have a slide menu (hint:: :active can be very powerful when combined with tabindex to make the element "inert" otherwise click events like a link), and many developers just can't bother it, especially when jQuery is so easily accessible.

So basically, yes, you can make a responsive layout with CSS only. And if you succeed, congratulations! JavaScript can be used to simplify, but in general, if you think you need it, you probably just need to rethink how you do it.

Unfortunately, I don't have links to JavaScript-less responsive layouts for you, because I'm very DIM - Doin 'It Meself!

---

Edit back Although I understand that Martijn demonstrates the use of JavaScript when creating images, it basically has a variable resolution depending on the size of the screen, images can be captured simply using SVG, if possible. If this is not an option, consider using a container with background-image - only the image that matches the media request will be downloaded :)

Answer 2

Sometimes yes, sometimes no.

First understand what a response layout is: an adaptive layout is one that dynamically changes itself. Depending on the size of the browser screen. So it is perfect for every type of screen, size, resolution, etc. So the site layout will not break.

You can simply use the CSS3 media query to change the layout, otherwise you can use jQuery or some other JavaScript to make this happen.

But remember, JavaScript is not required to make a document responsive.

Sometimes yes!

Sometimes a developer writes code using JavaScript, for example, the jQuery API. Therefore, it would be easy for him to write code in jQuery to dynamically process all events in a browser window to make the site Responsive.

It would be easy for me to write code in jQuery compared to CSS. Therefore, for this purpose I will have to add the jQuery source file to the document to make it that way. Otherwise, I will not be able to create responsiveness on the Site or I will not adhere to pure JavaScript

Example:

 if($(window).width() > '1300') { $('body').css({ 'height': '100%' /* etc */ }); } 

Sometimes not!

Some developers are well versed in CSS (CSS3 and its media queries). Therefore, they try to use CSS3 to render the document and make it responsive.

CSS3 is indeed much simpler than jQuery, and it would be useful to use it. It will also not require the inclusion of any of the Script files. You can easily write the code in the default CSS file. And changes will be made accordingly.

 @media only screen and (max-width: 1300px) { body { height: 100%; } } 

But remember

If you use simple CSS and then use CSS3 Media Queries to change the layout of the website, you can simply determine the screen size and other elements. You cannot check the properties of the browser or the contents on the screen, etc.

Answer 3

Both answers are acceptable. No, if you pretend that you are working with something like a flash site, and I hardly discourage it.

Yes, because JavaScript is needed for this, CSS3 / HTML5 is the solution for your business, but they come with some javascript features that you won't see, so there is javascript.

Answer 4

Default Feedback

No, you do not need JavaScript for responsive web design. This is necessary for those cool departures and sliding effects.

If you're building a website in pure CSS, you may need to make some compromises, such as a different menu layout or always visible sidebar content. Sliders are a problem.

But consider the following:

If you think about it, a responsive layout is not news. Open a simple HTML file in a web browser, and the content automatically adapts to the width of that browser. The Internet responds independently - by default. It’s us who have been breaking it all these years, placing content in containers with a fixed width.

Andy Hum in the Responsive By Default section, http://blog.andyhume.net/responsive-by-default/

Answer 5

Media queries allow you to execute sensitive pages only with css. But you have to remember the jquery '.resize ()' function when the user changes the horizontal layout to the vertical position on the phone or tablet.