Question

我想做像YouTube标题一样的事情。当窗口的宽度减小时，其徽标会发生变化并摆脱右侧的两个菜单图标。

function adjustImage(){
if($(window).width() <= 600) {
    $('#logoDiv').css({"width": "30px", "float": "right"}); }

if($(window).width() > 600) {
    $('#logoDiv').css({"width": "165px", "backgroundColor": "red"});    }
}
--this is just a part of the code from the link--

请点击链接查看我编写的代码。似乎JQuery代码不起作用，我不知道为什么

Answer 1

为此，您可以在css中使用media queries 例如

headers{
  width:100%
}
.sidemenu{
  width:100px;
  float:right;
}
.logo{
  width:100px;
  float:left;
}

/* Your styles for small screen */
@media only screen and (max-width: 500px) {
  .logo{
    width:50px; 
  }
  .sidemenu{
    display:none;
  }
}

https://jsfiddle.net/9h5smzuh/

Answer 2

不需要javascript ...可以用css完成它

MENU1 MENU2

#container {
  margin:0 auto;
    margin-bottom: 10px;
    padding: 7px 5px 7px 5px;
    max-width: 1250px;
    height: 30px;
    border: 1px solid green;
  text-align: center;
}


#logoDiv{
    float:left;
    margin: 0;
    width: 165px;
    height: 30px;
  background-color: red;
}


#middleDiv {
  display: inline-block;
    margin:0;
    padding: 0;
    width: 35%;
    height: 30px;
    border: 1px solid blue;
}

#md{
    margin:0;
    height: 25px;
    padding-top: 0;
    width: 100%;
    border: 1px solid red;
}

.rightDiv {
  float:right;
    margin-left: 5px;
  width: 60px;
  border: 1px solid red;
}

@media (max-width: 600px){
  #logoDiv{
    width: 30px;
    float: right;
    background-color: blue;
  }
}

Answer 3

实现您的要求的投注方式是使用媒体查询，而不是使用jQuery。媒体查询本身提供了调整屏幕表示的最佳方法，因此您无需转到jQuery或javascript。

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <style>
        #container {
            margin: 0 auto;
            margin-bottom: 10px;
            padding: 7px 5px 7px 5px;
            max-width: 1250px;
            height: 30px;
            border: 1px solid green;
            text-align: center;
        }
        
        #logoDiv {
            float: left;
            margin: 0;
            width: 165px;
            height: 30px;
            background-color: red;
        }
        
        #middleDiv {
            display: inline-block;
            margin: 0;
            padding: 0;
            width: 35%;
            height: 30px;
            border: 1px solid blue;
        }
        
        #md {
            margin: 0;
            height: 25px;
            padding-top: 0;
            width: 100%;
            border: 1px solid red;
        }
        
        .rightDiv {
            float: right;
            margin-left: 5px;
            width: 60px;
            border: 1px solid red;
        }
        
        @media (max-width: 600px) {
            #logoDiv {
                width: 30px;
                float: right;
                background-color: blue;
            }
            
            .rightDiv {
                display: none;
            }
        }
    </style>
</head>

<body>
    <div id="container">

        <div id="logoDiv"></div>

        <div id="middleDiv">
            <input id="md" type="text">
        </div>

        <div class="rightDiv">MENU1</div>
        <div class="rightDiv">MENU2</div>
        <div class="rightDiv">MENU3</div>

    </div>
</body>

</html>

＆＃13;

您想要做的只是将您的需求样式放在

中

@media (max-width: 600px) {

}

当屏幕尺寸低于600px时，将触发此操作。我添加了一些示例代码，我根据您的要求了解了这些代码。详细了解媒体查询here。

Answer 4

Jquery方式： -

这可以在CSS本身的媒体查询中轻松实现，但似乎你需要以jquery的方式。所以用jquery方式回答

为两个宽度添加单独的类并在这些类之间切换，同时调整大小$('#logoDiv').removeClass("desktop"); $('#logoDiv').addClass("mobile");

Check this fiddle

纯CSS方式： -

这可以在css本身的媒体查询中轻松实现

Check this fiddle

根据窗口大小更改/调整图像大小

4 个答案: