设置响应式字体大小在革命滑块jQuery插件中不起作用
Posted
技术标签:
【中文标题】设置响应式字体大小在革命滑块jQuery插件中不起作用【英文标题】：Setting responsive font size doesn't work in revolution slider jQuery plugin 【发布时间】：2021-04-05 10:11:07 【问题描述】：我正在尝试为revolution slider jQuery 版本中的文本设置响应式font-size，但我看到revolution slider 给它另一个font-size 本身的内联样式，而不是我在data-fontsize 属性中指定的字体大小为层。我认为它在我指定的两个视口大小之间的字体大小之间提供了另一种大小。
这是我尝试过的：
<section class="slider-container" id="">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div id="slider" class="rev_slider fullwidthbanner" style="display:none;" data-version="5.4.8.2">
<ul>
<li data-transition="cube-horizontal" data-hideslideonmbile="false" style="">
<img src="pictures/psy13.jpg" >
<div class="tp-caption rev_group rs-parallaxlevel-1"
data-
data-
data-x="['left','left','center','center']"
data-hoffset="['32','40','0','0']"
data-y="['center','center','center','center']"
data-type="group"
data-responsive_offset="on"
data-frames='[
"delay":100,
"speed":300,
"frame":"0",
"to":"o:1;",
"ease":"Power3.easeInOut"
,
"delay":"wait",
"speed":300,
"frame":"999",
"to":"opacity:0;",
"ease":"Power3.easeInOut"
]'
style="position:relative; z-index:6; "
>
<div class="tp-caption tp-resizeme"
data-type="text"
data-x="['left','left','center','center']" data-hoffset="['0','0','0','0']"
data-y="['center','center','center','center']" data-voffset="['0','0','0','-60']"
data-fontsize='[20,18,17,16]'
data-line
data-frames='[
"delay":"+90",
"speed":1500,
"frame":"0",
"from":"x:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;",
"to":"o:1;",
"mask":"x:0px;y:0px;s:inherit;e:inherit;",
"ease":"Power3.easeInOut"
,
"delay":"wait",
"speed":300,
"frame":"999",
"to":"opacity:0;",
"ease":"Power3.easeInOut"
]'
data-responsive_offset="on"
style=" z-index: 9;position: relative; white-space: nowrap; color:white; font-weight:100;"
>
We Solve the problems that is beyond your control
</div>
</div>
<div class="tp-caption tp-resizeme tp-shape tp-shapewrapper"
data-x="[center,center,center,center]" data-hoffset="[0,0,0,0]"
data-y="[center,center,center,center]" data-voffset="[0,0,0,0]"
data-type="shape"
data-
data-width:"full"
data-whitespace="nowrap"
data-frames='[
"delay":100,
"speed":1500,
"frame":0,
"from":"opacity:0;",
"to":"o:1;",
"ease":"Power3.easeInOut"
,
"delay":"wait",
"speed":300,
"frame":"999",
"to":"opacity:0",
"ease":"Power3.easeInOut"
]'
style="background:rgba(0,0,0,0.35); width:200vw; position:relative; z-index:1;"
>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
$('#slider').show().revolution(
delay:9000,
autoHeight:"off",
sliderLayout: 'fullwidth',
sliderType:'standard',
speed:'400',
responsiveLevels:[1200,992,768,576],
visibilityLevels:[1200,992,768,576],
gridwidth:[1240,1024,778,480],
gridheight:[1000,600,650,600],
parallax:
type:"mouse",
origo:"slidercenter",
speed:400,
speedbg:0,
speedls:0,
levels:[1,10,15,20,25,30,35,40,45,46,47,48,49,50,51,55],
disable_onmobile:"on"
);
请问，如何禁用此功能？
【问题讨论】：
视口的元标记是什么样的？ 【参考方案1】：我认为您的问题在于如何在 html 标记中提供 data-* 值。
如果它必须是一个数组，比如data-fontsize，不要用引号括起来。
应该是data-fontsize=[20,18,17,16]。
当插件使用 jQuery .data("key") 检索值时，它会自动将值解析为正确的类型...
每次尝试都将属性的字符串值转换为 javascript 值（这包括布尔值、数字、对象、数组和 null）。 Ref
但是如果你将它“强制”成一个字符串...... ;)
所以很多地方也是如此。
【讨论】：
【参考方案2】：您可以尝试在字符串数组中传递值而不是数字，所以试试
data-fontsize="['20','18','17','16']"
我可以看到您使用了 Revolution Slider 的 responsiveLevels，因此您可以为最多 4 种屏幕分辨率设置不同的字体大小
responsiveLevels:[1200,992,768,576]
所以
对于低于 576 像素的分辨率，字体大小为 16 像素 对于低于 768 像素的分辨率，字体大小为 17 像素 对于低于 992 像素的分辨率，字体大小为 18 像素 对于低于 1200 像素的分辨率，字体大小为 20 像素【讨论】：
@code-lover 如果这对您有用，请将其标记为答案以上是关于设置响应式字体大小在革命滑块jQuery插件中不起作用的主要内容，如果未能解决你的问题，请参考以下文章