Изменение ширины CSS с помощью Jquery в соответствии с шириной экрана

0

Привет, ребята, я столкнулся с некоторыми проблемами со следующим кодом. То, что я пытаюсь сделать, это изменить ширину 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>
  • 0
    screen.width == somevalue условие неверно screen.width == somevalue
  • 0
    В чем здесь проблема? Вы хотите знать, как получить ширину экрана?
Показать ещё 2 комментария

2 ответа

2
Лучший ответ

У вас есть несколько проблем. Ширина должна быть проверена с диапазоном

$(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;
    }
}
  • 0
    Да, >= имеет больше смысла. +1
0

Попытайтесь использовать событие 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 в качестве селектора, ошибка с else, если и т.д., А также я получил нижний предел для этого.

  • 0
    @ FabrícioMatté а теперь ...?
  • 0
    В ней еще не было фигурных скобок объекта, но я это исправил. Во всяком случае, я не сделал DV тебе +1, за усилия.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню