使用JavaScript进行响应式设计

Question

我已经完成了一个网站的设计,现在我很想让它具有响应性,我只需要让它对PC做出响应,因为使用该网站的移动设备无法做到这一点.

我只是想知道iCloud家伙是如何做到这一点的,当你重新调整窗口大小时,所有元素定位和重新调整大小很好,他们是使用纯CSS还是混合使用CSS和JS？iCloud的

我找到了很多教程,但仍然无法弄清楚为什么它对我不起作用.

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

我的示例html结构:

<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>

当前的CSS样式:

#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%;
}

我可以使用window.resize来检测窗口大小调整,然后使用jQuery更改元素的大小.

  $(window).resize(function() {

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

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

  });

但有没有其他方法可以做到这一点？

Answer 1

我建议你不要使用jQuery.

使用view-port检测设备宽度,如下所示:

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

然后,您可以使用媒体查询.

通过编写媒体查询,我们可以针对不同的设备宽度编写特定于设备的css:对于宽度高达480px的设备,媒体查询将如下所示:

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

我可以给你三个非常有用的学习链接:

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