-1
Я имею дело с мобильным дружественным веб-сайтом и используя это, я применил несколько анимаций, используя jquery. Я написал JQuery для рабочего стола, а также ноутбук также, как показано ниже:Могу ли я сделать свой jquery отзывчивым для всех устройств?
function mobani1()
{$("#animate1").fadeIn('slow').animate({'display':'inline-
block','margin- left':'180px','margin-bottom':'6px'},1000,function(){
$('.1st').animate({'opacity': '0.9'},400,
function(){$('.1st').animate({'opacity':'1'})})});
$("#animate1").fadeIn('slow').animate({'margin-bottom':'0px','margin-left':'-140px'},1000)
.fadeOut('slow');}
function mobani2(){ $(".2nd").fadeIn('slow').animate({'margin-left':'20px','margin-bottom':'2px'},'slow',function(){$('.1st').animate({'opacity':'0.5'},1000,
function(){$('.1st').animate({'opacity':'1'},'slow')})}).fadeOut();
$(".2nd").fadeIn('slow').animate({'margin-bottom':'0px','margin-left':'-150px'},'slow')
.fadeOut('slow');}
var interval1=[mobani1,mobani2,mobani3];
var index =0;
$(document).ready(function(){
window.setInterval(function(){
interval1[index++ % interval1.length]()
},10800); // total time taken by animation is 10800
});
Теперь у меня есть различные мобильные устройства, поэтому в каждых устройствах, я не могу установить margin-leftmargin-bottom согласно приведен здесь. Например, здесь margin-left: 180px, но что произойдет, если мой мобильный телефон имеет ширину 500 пикселей, 800 пикселей различной ширины? Итак, как я могу написать выше jquery для мобильных версий.
Возможно, вы не должны использовать фиксированные значения, такие как пиксели. Вместо этого используйте em, vh, vw. –
Решение для фанатиков javascript - использовать '$ (window) .width()' и '$ (window) .height()' для вычисления полей. – Banzay
Не уверен, что главное предложение вашего кода, но я думаю, должно быть интересно прочитать о различии между отзывчивым и адаптивным дизайном. https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/ –