我有一个div,我想成为两种尺寸之一。
我尝试了以下代码,但它无效。我需要帮助才能让它发挥作用。
这是jsbin:http://jsbin.com/oFIRawa/1
这是我到目前为止的代码:
page.html中
<div id="theDiv"> </div>
的style.css
#theDiv {
background: #000;
border: 2px solid #222;
width: 300px;
height: 400px;
margin: 50px auto 0 auto;
}
的script.js
$(document).ready(function () {
// call the method one time
updateWindowSize();
// subscribe the method to future resize events
$(window).resize(updateWindowSize);
// variables
var updateWindowSize = (function(){
var minAllowedWindowHeight = 500;
var largerDivHeight = 400;
var smallerDivHeight = 300;
// actual updateWindowSize function
return function(){
var winHeight = $(window).height();
var newHeight = winHeight < minAllowedWindowHeight ? smallerDivHeight : largerDivHeight;
$('#theDiv').height(newHeight);
};
})();
});
答案 0 :(得分:5)
你可以在CSS中做这个我的好先生。它被称为响应式设计!
@media (max-height:500px) {
Enter special css conditions for 500px height.
}
@media (max-height:200px) {
Enter special css conditions for 200px height.
}
这更常用于max-width,因为它可以告诉我们何时有人使用移动设备(类似360px max-width),然后我们可以修改我们的页面以便在移动设备上看起来不错。不需要花哨的JavaScript!
答案 1 :(得分:2)
var threshhold;
var smallerHeight = 50;
var largerHeight = 100;
if ($(window).height() < threshold)
$('#theDiv').height(smallerHeight);
else
$('#theDiv').height(largerHeight);
<强> FIDDLE 强>