网上找了一下发现目前没人提到这个问题，不清楚是用的人少，或者是分享的人少，还是我比较笨，大家都知道怎么解决这个问题。。。不管了，我就打算把自己探索的过程，解决的方法记录下来，希望能帮助到跟我一样遇到类似问题的朋友，若帮到了您，请给我来一打赞，坚持写作也是不容易，谢谢大家！！

smart slider3 这个插件非常好用，但是由于接触时间不久，对其功能了解不全面，以为其手机端的图片无法自动调整，所以显示效果是，PC端可以满屏，但是手机端却是很细长的内容。

问题

先给大家看看最后解决的效果

解决方案

具体操作

1、设置背景

2、背景设置模糊化

3、添加PC端/手机端图层

该方案的缺点

克服手机端图片无法覆盖背景的方法

问题

PC端效果很完美

手机端

由于手机端屏幕比例跟PC端完全电脑过来，所以直接用PC端的图片在手机端展示，那么效果会很差，海报轮播栏在手机端上就会变得很小，很不引人注目。

先给大家看看最后解决的效果(请看文章最后，效果完美）

PC端（跟原来一样）

手机端

解决方案

1、将原来的海报作为背景，然后虚化

2、分别为PC端与手机准备两张不同的比例的图片（这两个图片分别作为两个图层，然后这两个图层可以选择仅再部分设备显示，例如PC图片可以选择仅再PC端、平板显示，手机端图片可以选择仅在手机端显示）

3、尺寸要调好，手机端比例是4:3 PC端图片分辨率我直接使用1920*1080

问题来了，如何让PC端显示的图片和手机端显示的图片不同呢？

首先我要说，smart slider3 真的很强大。

smart slider3 显示内容的层次是，一个background，然后上面我们自己自定义自己的layer，然后这些layer可以选择再那些终端显示，那些终端不显示。这也为解决我们的问题提供了一个很好的思路。那么就是我们的图片可以不作为背景，背景留白，然后我们放两个图片作为两个layer，然后PC端的图片选择尽在PC端显示，手机端的图片仅再手机端显示。

具体操作

1、设置背景

2、背景设置模糊化

3、添加PC端/手机端图层

1）选择添加图层

2）选择图层的图片

3）选择图层显示的设备

该方案的缺点

1、PC端屏幕如果太大，那么可能出现无法填满页面的情况，两边会看到背景

若用图片作为背景效果是这样子

若将图片作为layer，背景选择原来的图片模糊化，当屏幕太大效果如下，我目前的屏幕是1920*1080展示还是很完美

2、手机端的图层content大小被限制了，所以无法像电脑端一样可以在大部分情况下覆盖背景，做好的情况也是两边会有一遍背景。目前我还没找到解决办法，但是我觉得这样子，比原来使用PC端的图片直接显示强多了。还有我说的这种情况只会在屏幕大的手机上出现，如果手机屏幕小点，那么就不会出现这种情况。

克服手机端图片无法覆盖背景的方法

在偶然一次机会，我发现手机端图片显示问题的方法的原因是由于海报屏模块尺寸比例设置不当导致的。

最后我把海报轮播屏的尺寸改成了一下，再试试发现完美解决了问题。

海报尺寸

下面的尺寸总结是我试了很久才的出来的，如果对你有帮助，请你给我点一打赞！！非常感谢！！

我用海报的PC端分辨率是1920*850（本来是1920*1080 后面发现太长了) 手机端是 750*563（符合4:3）

slider的海报我是用一张比较小的图，分辨率跟PC端一样，然后虚化了一下，这个功能smart slider里面有，非常好用！

这个给我的启示是，如果一个屏幕显示一张图片，会有空白处，那么很可能就是图片的比例与屏幕显示的比例存在差异导致的。

具体设置海报轮播屏尺寸的方法如下

上下效果图(是不是很完美，赶紧给我一打赞吧！）

wordpress海报轮播插件Smart Slider3 多端自适应--解决手机端海报细长问题相关推荐

网站项目必备——12款白富美型 jQuery 图片轮播插件
转自:http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html 图片轮播是网站中的常用功能,用 ...
html轮播图水平传送带,经典的白富美型jQuery图片轮播插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
html轮播图水平传送带,12款 jquery轮播插件
Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独 ...
jQuery 图片轮播插件
网站项目必备--12款经典的白富美型 jQuery 图片轮播插件图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 ...
fwslider--属于自己的一个图片轮播插件
一直在学习,一直在提升,一直在想什么时候自己也能写个简单的图片轮播啊? 终于,我写出来了,虽然没有别人写的那么牛逼,我也没有办法和大牛比,所以跟自己比就好了,自己有提升就很开心,这个图片轮播写出来一段 ...
html图片展示插件,12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
12款经典的白富美型 jQuery 图片轮播插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精 ...
网站项目必备——12款经典的白富美型 jQuery 图片轮播插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
3d饼图 vue_这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
介绍在Web网页开发中,我们经常需要用到图片轮播,在以往传统的开发方式中有很多基于jquery的插件可供使用,但是随着目前各类前端框架层出不穷的现状,在某些方面特别是针对特定的场景,还是有不少地方不 ...

wordpress海报轮播插件Smart Slider3 多端自适应--解决手机端海报细长问题

问题

先给大家看看最后解决的效果(请看文章最后，效果完美）

解决方案

具体操作

1、设置背景

2、背景设置模糊化

3、添加PC端/手机端图层

该方案的缺点

克服手机端图片无法覆盖背景的方法

wordpress海报轮播插件Smart Slider3 多端自适应--解决手机端海报细长问题相关推荐

最新文章

热门文章