Javascript 如何根据屏幕大小调整横幅

我已经创建了一个移动横幅，我需要它根据屏幕大小调整大小。我在我的html中添加了一些内联规则以强制调整大小，因为如果没有内联代码，图像的大小将增加到原来的三倍。但现在我认为我的内联代码可以防止图像在越来越大的设备上自动调整

多谢各位

功能滑块（o）{
“严格使用”；
var时间=运行时间| | 500，
自动时间=o.autoTime | | 5000，
选择器=o选择器，
宽度|高度=o.宽度|高度| 100/70，
滑块=document.querySelectorAll（选择器），
我
函数css（elm、prop、val）{
榆树风格[道具]=val；
prop=prop[0].toUpperCase（）+prop.slice（1）；
elm.style[“webkit”+prop]=elm.style[“moz”+prop]=
榆树花式[“ms”+道具]=榆树花式[“o”+道具]=val；
}
函数anonimFunc（滑块）{
var buttonRight=滑块。子项[2]，
buttonLeft=滑块。子项[1]，
ul=滑块。子项[0]，
li=ul.儿童，
activeIndex=0，
isAnimate=false，
我
s
ul.style.paddingTop=（100/宽+高）+“%”；
对于（i=0；i0）？（activeIndex-1）：（li.length-1）；
li[nextIndex].classList.add（“上一个”）；
li[activeIndex].classList.add（“左”）；
li[nextIndex].classList.add（“活动”）；
setTimeout（函数（）{
li[activeIndex].classList.remove（“active”）；
li[activeIndex].classList.remove（“左”）；
li[nextIndex].classList.remove（“上一个”）；
li[nextIndex].classList.add（“活动”）；
activeIndex=nextIndex；
isAnimate=假；
s=设置超时（左，自动计时）；
}，时间）；
}
按钮left.addEventListener（“单击”，右键）；
按钮右。addEventListener（“单击”，左）；
s=设置超时（左，自动计时）；
}
对于（i=0；i
@关键帧滑块关键帧下一步{
0%{右：100%；}
100%{右：0；}
}
@关键帧滑块右键{
0%{右：0；}
100%{右：-100%；}
}
@关键帧滑块上一个关键帧{
0%{右：-100%；}
100%{右：0；}
}
@关键帧滑块左键{
0%{右：0；}
100%{对：100%；}
}
.滑块{
溢出：隐藏；
位置：相对位置；
}
.滑块>ul{
保证金：0；
填充：0；
列表样式：无；
位置：相对位置；
浮动：对；
宽度：100%；
溢出：隐藏；
}
.slider>ul>li{
位置：绝对位置；
右：100%；
排名：0；
宽度：100%；
身高：100%；
可见性：隐藏；
动画计时功能：轻松进出；
动画填充模式：正向；
}
.slider>ul>li.active{可见性：可见；右：0；}
.slider>ul>li.right{动画名称：slider关键点right；}
.slider>ul>li.next{动画名称：滑块键next；}
.slider>ul>li.left{动画名称：slider键left；}
.slider>ul>li.previous{动画名称：slider键previous；}
.滑块{
最大宽度：700px；
保证金：0自动；
背景色：#fff；
盒影：0 3px 6px rgba（0,0,0,0.2）；
}
.滑块>按钮{
过渡：0.3s；
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
宽度：0px；
高度：0px；
背景色：#FAFAFA；
不透明度：0.5；
边界：0；
大纲：无；
填充：0；
光标：指针；
边界半径：100%；
盒影：0 3px 6px rgba（0,0,0,0.2）；
背景大小：60%；
背景重复：无重复；
背景位置：中心；
}
.滑块>按钮：悬停{
不透明度：1；
盒影：0 5px 10px rgba（0,0,0,0.2）；
}
.滑块>按钮：第n个子项（2）{
右：10px；
}
.滑块>按钮：第n个子项（3）{
左：10px；
}
.滑块>ul>li>img{
宽度：100%；
身高：100%；
位置：绝对位置；
右：0；
排名：0；
}
.slider>ul>li{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
文本对齐：居中；
填充：0；
}
.滑块>ul>li h1，
.slider>ul>lip{
位置：相对位置；
填充：0.15%；
颜色：#fff；
字体系列：无衬线；
}






希望这对您有用


功能滑块（o）{
“严格使用”；
var时间=运行时间| | 500，
自动时间=o.autoTime | | 5000，
选择器=o选择器，
宽度|高度=o.宽度|高度| 100/70，
滑块=document.querySelectorAll（选择器），
我
函数css（elm、prop、val）{
榆树风格[道具]=val；
prop=prop[0].toUpperCase（）+prop.slice（1）；
elm.style[“webkit”+prop]=elm.style[“moz”+prop]=
榆树花式[“ms”+道具]=榆树花式[“o”+道具]=val；
}
函数anonimFunc（滑块）{
var buttonRight=滑块。子项[2]，
buttonLeft=滑块。子项[1]，
ul=滑块。子项[0]，
li=ul.儿童，
activeIndex=0，
isAnimate=false，
我
s
ul.style.paddingTop=（100/宽+高）+“%