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

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

Answer 2

您可以使用media queries以特定分辨率注入css。

例如：

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

您应该添加transitions以使其在调整大小时看起来更流畅。哦，不要忘记视口元标记：<meta name="viewport" content="width=device-width, initial-scale=1" />

Answer 3

如果您想以类似于icloud示例的方式移动和动画元素以填充可用宽度，那么有一个名为“Masonry”的JavaScript库可以实现这样的结果：http://masonry.desandro.com/

请记住，“响应式”一词也有更深层次的含义。您正在询问构建网站的整个过程和方法，这些网站在此过程中采用了许多技术。查看CSS3媒体查询，了解其中一个较大方面的纲要。

Answer 4

您可以使用javascript使其响应。请注意，虽然纯javascript最初可能有点难以使用，因为您要求的似乎是动画等。因此，我建议使用名为“jQuery”的javascript库。您可以找到有关如何使用它的教程here。使用jquery的原因是它允许您使用预定义的函数来满足您的要求。因此，例如，可以完成动态调整大小，以及它最初加速的效果，然后在接近模拟结束时减速，仅使用几行jQuery，而在纯javascript中可能需要数十，如果不是数百行（随机猜测）。不确定iCloud用户使用的是什么，但它会是这样的。这很好的原因是你可以动画几乎任何东西 - 颜色过渡，调整大小，重新定位等。你甚至可以创建可拖动的对象！要使用它，您需要下载库，将其放在网站文件夹中的文件夹中，并在html中定义指向它的链接。

使用JavaScript进行响应式设计

4 个答案: