基于JavaScript的响应设计
我已经完成了一个网站的设计，现在我想让它响应，我只需要让它响应个人电脑，因为不能在手机上使用该网站。
我只是想知道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
Stack Overflow用户
发布于 2013-11-07 05:57:07
我将建议您不要为此使用jQuery。
使用视图端口检测设备宽度，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>然后可以使用媒体查询。
通过编写媒体查询，我们可以为不同的设备宽度编写特定于设备的css :就像宽度高达480 be的设备一样，媒体查询将如下所示：
@media screen and (max-device-width: 480px) {
.column {
float: none;
}
}我可以给你们三个非常有用的学习链接：
- http://alistapart.com/article/responsive-web-design
- http://css-tricks.com/css-media-queries
- 查询
Stack Overflow用户
发布于 2013-11-07 04:22:04
您可以使用媒体查询注入具有一定分辨率的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" />
Stack Overflow用户
发布于 2013-11-07 04:23:05
如果您想以类似于icloud示例的方式移动和动画元素来填充可用宽度，那么就有一个名为“JavaScript”的http://masonry.desandro.com/库实现了这个结果：http://masonry.desandro.com/
记住，“反应”这个词也有更深层次的含义。你要问的是建立网站的整个过程和方法，这些网站都使用了很多技术。在这里查看CSS3媒体查询，查看其中一个更大的方面。
https://stackoverflow.com/questions/19827917
复制相似问题
腾讯云开发者
