使用JavaScript进行响应式设计 [英] Responsive designing with JavaScript

问题描述

我已经完成了一个网站的设计，现在我很想让它变得灵敏，我只需要让它对PC做出响应，因为使用该网站的移动设备无法做到这一点。

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.

我只是想知道 iCloud 这些人是怎么做的，当你重新调整窗口大小时，所有元素定位和重新调整大小很好地，他们使用纯CSS还是混合使用CSS和JS？ iCloud

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 /

我的示例html结构：

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>

当前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更改元素的大小。

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?

推荐答案

我建议你不要使用jQuery。

I will recommend you not to use jQuery for this.

使用view-port来检测设备宽度以下内容：

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.

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

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:

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

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

这篇关于使用JavaScript进行响应式设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！