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

Shopify 根据浏览器的不同尺寸显示不同的图片

相信用过shopify的用户都了解一点,就是当我们在添加图片的时候,如果图片的高度很小,PC端显示没有问题的时候,在手机端就会变成一个长条,所以大家可能会很郁闷,怎么才能让移动端显示的图片大一点呢?
 
但是目前Shopify如果想要根据不同的浏览器显示不同的图片,我下面将三种方法:
 
1、一个是用css写,当浏览器缩小到一定的尺寸以后,PC端的图片隐藏,移动端的图片显示,如下所示:
@media (max-width:768px){
.desktop img{
display:none;
}
.mobile img{
display:none;
}
}

2、第二个就是让这个图片当做背景,固定容器的高度,但是这个有一个缺点就是浏览器小到一定程度就会被裁切,只保留中间的部分,所以做图的时候还得特别注意,要把重要的内容尽量往图片的中间位置放,如下所示:
@media (max-width:768px){
.desktop{
display:block;
height:300px;
background:url("https://cdn.shopify.com/s/file ... 6quot;) no-repeat;
background-size:cover;
}
}
3、就是通过在section对应的文件中添加两个图片,一个是移动端的,一个是PC端的,如下图所示:

微信图片_20181219091050.png

 
如果不会添加可以查看Shopify sections模板文件里面添加text、textarea等字段 ,然后在前台需要显示的位置添加一段HTML的代码,并调用这两个图片:
 
微信图片_20181219091400.png

 
如上图所示,我们只要用picture标签来引用这两个图片即可,picture中间的source可以根据自己的需求添加多个,在添加的同时,不要忘记在下面多添加几个图片,然后我们在对其改造一下,如下图所示:

微信图片_20181219092103.png

 
这样如果在后台Customize中,有一个地方没有添加图片,在电脑上面对应的位置就不会显示图片。
 
以上三种各有优缺点,如果想以后在也不想看代码的话,本人建议使用第三种方法,写一次就可以。
 
如有不对,还请各位大神提出修改意见!
1
2018-12-19

1 个评论

感谢分享,不错的教程。

要回复文章请先登录注册