Shopify Free Trial Apply
Shopify 60天试用
Shopify 14天试用

关于slide revolution 怎么做到移动端更好的效果


1.png

pc按照pc端设置的宽高,其他屏幕设备都是auto,当屏幕过小的时候会出现这种情况,宽高是等比例缩小的。
所以我会去设置一下移动设备的banner宽高,结果图片不是居中的,只显示一侧,但是分明又是设置了background-position:center center;如果banner上面有文字、有按钮那就更加麻烦。
我现在是新建了一个专门的mobile slide,
        <?php if ( wp_is_mobile() ){ ?>
        <?php echo do_shortcode('[rev_slider alias="mobile-slide"]');?> 
        <?php }else { ?>
        <?php echo do_shortcode('[rev_slider alias="homeslide"]');?> 
        <?php } ?>   
 
做了一个判断,这样我可以单独设置一个mobile的banner,但是这样的话,需要重新去处理图片,裁切banner(这样做百分百ok,但是需要重新制作一批banner,比较麻烦),但如果是使用原图的话,也还是不太好,而且这个banner高度有个限制的,似乎宽高比不能小于原图比例,小于原图,这个高度设置了也没有用。
2.png

 
参考过ccgrass这个客户的网站,他这个banner的responsive做的就不错,但是分明设置和ccgrass几乎一样的,图片都是background-position:center center;background-size:cover
 
是否有人之前处理过这个slide revolution插件的responsive处理的比较好的,banner图上面要嵌入一些文字和按钮,因为按钮有链接,所以也不好 直接做成图片
 
 
已邀请:

Leo - 佛系Web Developer

赞同来自:

1.png

发现这个min-height还可以的,这样似乎就解决了​宽高比不能小于原图比例的限制了,虽然图片会裁切部分内容,但是至少高度上面可以大一点了,在不处理原banner图的情况下,这个最小高度可以考虑设置一下,当然文字、按钮这些还是要重新放一下,所以还是需要新建一个mobile slide

East_Digi_Marketing - 隽永东方创始人--钟小哥

赞同来自:

感觉如果需要非常完美的Responsive还是建议在窄屏底下隐藏一些浮动的文字和button,只是单纯背景图片的话,基本都很好控制响应式。

要回复问题请先登录注册