Question

嘿伙计们我遇到了以下代码的一些问题。我尝试做的是根据屏幕宽度通过div修改css的宽度。

<html>
<head>
     <script src="../jquery/jquery.js" type="text/javascript"> // Add JQuery Code.   </script>
</head>
<body>
<div id="something" style="background-color: black; width: 100px;">hello</div>
<script>
$(document).ready(function() {
    if (screen.width = 1024) {
        $(#something).css('width':'200px', 'background-color':'blue');
    }
    elseif (screen.width = 1366) {
        $(#something).css('width':'300px', 'background-color':'blue');
    }
}
</script>
</body>

Answer 1

你有一些问题。应使用范围

检查宽度

$(document).ready(function() {
  if ($(window).width() >= 1366) {
    $('#something').css({ 'width':'300px', 'background-color':'blue' });
  } else if ($(window).width() >= 1024) {
    $('#something').css({ 'width':'200px', 'background-color':'blue' });
  }
});

编辑：结合window.resize，我认为它的行为正是你想要的。但您也可以考虑使用css媒体查询来实现响应式布局。

@media only screen and (min-width:1024px){
    .my-style {
        background-color: blue;
        width: 200px;
    }
}
@media only screen and (min-width:1366px){
    .my-style {
        background-color: blue;
        width: 300px;
    }
}

Answer 2

尝试使用窗口的resize事件，方法是在if语句中指定值，

$(document).ready(function() {
  $(window).resize(function(){
    var something = $('#something');
    if ($(this).width() >= 1366) {
        something .css({'width':'200px', 'background-color':'blue'});
    }
    else if ($(this).width() >= 1024) {
        something.css({'width':'300px', 'background-color':'blue'});
    }
  });
});

注意：您的代码有很多语法错误，例如将未定义的var作为选择器传递，错误传递给其他等等。以及我收到了一个downvote。

根据屏幕宽度使用Jquery修改CSS宽度

2 个答案: