Change div content if screen resolution is less?

Question

I have some floating elements on my site that will not be visible if the screen resolution is 1024X768 or lower. Therefore, I want people with this screen to display a different placement of this content, and this will be a slightly different code for the content.

Say that people with 1024 and above will get a big square floating on the left side of the page, and people at the bottom will get a rectangle located above the main content.

There are some javascript projects for this, I think, but I could not find ...

This content that I want to change will also be changed.

Here is an example of something like what needs to be done.

ShareStuff () {function

if ($(window).width() < 1024) {
   <div id="sharepost"><div class="sharer"><a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-count="vertical" data-via="code_love" data-related="love:code">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
<div class="sharer"><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript" defer="defer"></script></span>
</div><div class="sharer"><a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count" data-url="<?php the_permalink(); ?>"></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js" defer="defer"></script></div><div class="sharer"><script src="http://www.stumbleupon.com/hostedbadge.php?s=3"></script></div><span class="st_email" ></span>
</div>

} else {
  <div id="sharepost"><div class="sharer"><a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-count="horizontal" data-via="code_love" data-related="love:code">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
<div class="sharer"><a name="fb_share" type="horizontalk" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript" defer="defer"></script></span>
</div><div class="sharer"><a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count" data-url="<?php the_permalink(); ?>"></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js" defer="defer"></script></div><div class="sharer"><script src="http://www.stumbleupon.com/hostedbadge.php?s=3"></script></div><span class="st_email" ></span>
</div>
} }

Thanks in advance

Answer 1

, javascript, , -

<!-- here provide css for all (also > 1024px) cases -->
<link rel='stylesheet' type='text/css' href='allresolution.css' />

<!-- here overwrite css for small devices -->
<link rel='stylesheet' type='text/css' media="all and (max-width:1024px)" href='lessthan1024.css' />

Answer 2

, :

if ($(window).width() < 1024) {
    // code for small viewports
} else {
    // code for large viewports
}

.

Answer 3

CSS , , screen.width .

- .

  if(screen.width==1024)
     {
        document.write("<link rel='stylesheet' type='text/css' href='style_1024.css' />"); // this css runs in only 1024 resulation
     }
  else
    {
        document.write("<link rel='stylesheet' type='text/css' href='style_other.css' />"); // for other resulatiom
    }

, .

Answer 4

. .

<div class="someclass" id="hidden_1" style="display:none"> Something very big for big screen</div> 
<div class="someclass" id="hidden_2" style="display:none"> small</div> 


 @media only screen and (min-width: 1450px)
{
#hidden_1 {display: block !important}
}
@media only screen and (min-width:1281) and (max-width:1450)
{
#hidden_1 {display: block !important}
}

@media only screen and (min-width:981px) and (max-width:1024px)
{
#hidden_2 {display: block !important}
}

, ! . 1024px....

div normal, CSS! , chrome. ...

Finally, I had to create one media query for (min1450px). If I put a general section of code that needs to be rewritten by a specific media request, that general section (without a media request) rewrote the more specific ones. Therefore, I applied a hidden div in the media request, which will target all computers with a minimum request only for the @media screen and (min-width: 1450px). Then, the OS / browsers began to apply the correct media query.