使用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:
- http ://alistapart.com/article/responsive-web-design
- http://css-tricks.com/css-media-queries
- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
- http://alistapart.com/article/responsive-web-design
- http://css-tricks.com/css-media-queries
- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
这篇关于使用JavaScript进行响应式设计的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!