我想做像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代码不起作用，我不知道为什么
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本身的媒体查询中轻松实现
检查这个小提琴
为此，您可以在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; } }
不需要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; } }
实现您的要求的赌注方式是使用媒体查询 ，而不是使用jQuery 。 媒体查询本身提供了调整屏幕表示的最佳方法，因此您不需要使用jQuery或javascript 。
MENU1 MENU2 MENU3
以上就是jQuery教程分享根据窗口大小更改/调整图像大小相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/jquerytutorial/559087.html