1

我已经完成了一个网站的设计，现在我很想让它响应，我只需要让它对 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');

  });

但是还有其他方法可以做到这一点吗？

4

4 回答 4

5

我会建议你不要为此使用 jQuery。

使用视口检测设备宽度，如下所示：

<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
于 2013-11-07T05:57:07.407 回答
3

您可以使用媒体查询以特定分辨率注入 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>

您应该添加过渡以使其在调整大小时看起来更平滑。哦，别忘了 viewport 元标记：<meta name="viewport" content="width=device-width, initial-scale=1" />

于 2013-11-07T04:22:04.373 回答
1

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

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

于 2013-11-07T04:23:05.200 回答
-3

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

于 2013-11-07T04:53:01.520 回答