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

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

codepen.io

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

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

Answer 1

Jquery方式： –

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

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

检查这个小提琴

纯CSS方式： –

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

检查这个小提琴

Answer 2

为此，您可以在css中使用媒体查询作为示例

 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 3

不需要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 4

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

       
 
 
  
 
MENU1
 
MENU2
 
MENU3