我正在尝试修改以下 html:
<div class="col1 width8"><img src="images/entity.jpg"></div>
我想使用媒体查询,但我不想修改css,而是将类名从width8替换为width6。对于下面的标准媒体查询来说,这通常是不可能的:
@media only screen and (min-width: 1240px) and (max-width: 1484px) { }
我希望使用 jquery 删除该类并在窗口宽度在 1240 到 1484px 之间时添加一个类。你能帮我用 jquery 替代媒体查询来修改内联类和 id 名称吗?
这是我的jquery
$(document).ready(function() {
$(window).resize(function(){
var width = $(window).width();
if(width >= 1240 && width <= 1484){
$('#info').removeClass('col9').addClass('col8');
}
else if(width >= 1485 && width <= 1788){
$('#info').removeClass('col8').addClass('col7');
}
else if(width >= 1789 && width <= 2237){
$('#info').removeClass('col7').addClass('col6');
}
else if(width >= 2238 && width <= 3000){
$('#info').removeClass('col7').addClass('col6');
}
else{
$('#info').removeClass('col8').addClass('col9');
}
})
.resize();
});
你可以试试这个。
$(window).resize(function(){
console.log('resize called');
var width = $(window).width();
if(width >= 700 && width <= 900){
$('#myelement').removeClass('width8').addClass('width6');
}
else{
$('#myelement').removeClass('width6').addClass('width8');
}
})
.resize();//trigger the resize event on page load.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)