Responsive designing with JavaScript

问题

I've finished designing a web site and now I'd love to make it responsive, I just need to make it responsive for PCs as much can't be done on mobiles using the site.

I'm just wondering how the iCloud guys do that, when you re-size the window, all the elements positioning and re-sizing by itself nicely, are they using pure CSS or mixture of both CSS and JS? iCloud

I found many tutorials but still couldn't figure out why it won't work for me.

http://unstoppablerobotninja.com/demos/resize/

my example html structure:

<div id="place">
 <div id="wrap">
   <div id="1"><img src="">this div needs to be responsive</div>
   <div id="2"><img src="">this too</div>
   <div id="3"><img src="">and this</div>
   <div id="4"><img src="">also this</div>
 </div>
</div>

current CSS styles:

#place{
    position: relative;
    width:3065px;
    height:560px;
    margin:0px;
}

#wrap,
{
    width:975px;
    height:480px;
    position: absolute;
    top:80px;
}

#1{
    width:215px;
    height:103px;
    position: absolute;
    left:0px;
    top:0px;
        background-color:#409da5;
}

#1 img,
{
    width: 100%;
    height: 100%;
}

I can use window.resize to detect window resize and then change the size of elements using jQuery.

  $(window).resize(function() {

              var nh = $("#1")width() / ratio;
              $("#1").css('height', nh + 'px');

              var nw = $("#1").height() * ratio;
              $("#1").css('width', nw + 'px');

  });

but are there any other ways to do this?

回答1:

I will recommend you not to use jQuery for this.

Use the view-port to detect device width like the following:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

Then you can use media queries.

By writing media queries we can write device specific css for different device widths: Like for devices having width up to 480px, the media query will be like this:

 @media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

I can give you three very useful links to study:

http://alistapart.com/article/responsive-web-design
http://css-tricks.com/css-media-queries
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

回答2:

You can inject css at certain resolution with media queries.

For example:

<style>
    @media screen and (max-width: 400px) {
        /*These styles will only be applied if the user is on a phone*/
        body {
            font-size: 100%;
        }
    }
</style>

You should add transitions to make it look smoother when resizing. Oh, and don't forget the viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1" />

回答3:

If you'd like to shift and animate elements to fill the available width in a way that's similar to the icloud example, then there's a JavaScript library called 'Masonry' that achieves that very result: http://masonry.desandro.com/

Keep in mind that the term 'responsive' has deeper connotations too though. You're asking about an entire process and approach to building websites that employs a number of techniques along the way. Check into CSS3 Media Queries for a rundown on one of the larger aspects at work here.

回答4:

You could probably make it responsive using javascript. Note though that pure javascript may be a little hard to use initially, as what you are asking for seems to be animations and such. Hence, I would suggest using a javascript library called "jQuery". You can find a tutorial on how to use it here . The reason for using jquery is that it allows you to use predefined functions for what you are asking. So, for example, dynamic resizing could be done, along with the effect that it speeds up initially, then slows down as it nears the end of the simulation, using just a few lines of jQuery, while in pure javascript may require tens, if not hundreds of lines (as a random guess). Not sure what the iCloud people use, but it would be something like this. The reason why this is great is that you can animate almost anything - color transitions, resizing, repositioning etc. You can even create draggable objects! To use it, you would need to download the library, place it in a folder in your website folder, and define a link to it in your html.

来源：https://stackoverflow.com/questions/19827917/responsive-designing-with-javascript

标签

javascript

jquery

html

css

responsive-design