javascript - 使用 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。

使用视口(viewport)检测设备宽度，如下所示:

<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