CODEWITHSUNDEEP
jquerycssresponsive-designmedia-queries
Will John
Will John

Reputation: 25

CSS Media Queries vs Jquery responsive solution?

I was looking for a lot about responsive design, and I saw several ways to do it, both on the server side and on the client, I wanted to know how best to do it, whether using jquery or css media queries. But I'm doing a large site, with registration of users and possibility of uploading files. I was thinking of creating div's within the index, which contains php files according to the screen, these div's have display: none, they are only enabled with the media queries according to the size of the screen, as in the example below:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<style>

 @media screen and (min-width: 600px) {
    .600px-min{ display: block }
    .940px-min{ display: none }
 }

 @media screen and (min-width: 940px) {
    .940px-min{ display: block }
    .600px-min{ display: none }
 }

</style>

</head>
<body>
   <div class="600px-min" style="display:none">
       <? php include("contents_600px.php"); ?>
   </div>

   <div class="940px-min" style="display:none">
       <? php include("contents_940px.php"); ?>
   </div>

</body>
</html>

If I do this with css is it advantageous? I would just run php scripts that are inside the div that will have the correct display block? Or would it download all the html from all php scripts? Or would it be more advantage to use jquery for this? I'm very lazy about it, I'm researching a lot, but there are not many answers to that!

Upvotes: 0

Views: 704

Answers (1)

Adrian Brand
Adrian Brand

Reputation: 21638

CSS media queries is the only modern way to build a responsive website. jQuery and serverside solutions are about a decade out of date.

Upvotes: 1

Related Questions