静态组件实现响应式图片

在不同的屏幕尺寸下,网页里的图片宽度通常会根据屏幕的尺寸进行伸缩,这是响应式网站的特点之一。想要在不同屏幕尺寸下显示不同的图片,是加强响应式网站用户体验的方式之一,这篇文章我们就介绍如何在不同的屏幕尺寸下显示不同的图片。

举例来说,在后台中找到首页Banner图片。

一般而言,Banner图片在电脑端显示时,采用传统横向(宽度大于高度)的尺寸会更合适。而在手机端Banner图片则以竖向(宽度小于高度)的尺寸更为合适。

这张Banner图在小尺寸的屏幕(也就是在手机端打开的时候)看起来就太小,这时我们就需要单独对小屏幕的Banner图进行设置。

手机小屏图片的定位和更换

STEP 01

在工作区上方的橙色响应条上对网页的尺寸进行选择,然后定位到“手机小屏”的地方。

定位的两端被叫做“断点”

STEP 02

然后双击图片位置进入素材库,找到需要更换的新的图片。这时,更换成功后,调试屏幕尺寸时就会发现在所有的尺寸下的图片都被更换了。

手机大屏图片的定位和更换

在网页的尺寸大于手机大屏时,我们希望依然保留最开始的传统横向式Banner图片,这时需要又一次进行定位和更换。

STEP 03

在工作区上方的橙色响应条上对网页的尺寸进行选择,然后定位到“手机大屏”的地方。

STEP 04

然后双击图片位置进入素材库,找到最开始的传统横向式Banner图片。这时,更换成功后,调试屏幕尺寸时就会发现在大屏以上的Banner图恢复了原来的传统横向,而在手机小屏的时候,图片就会切换为竖向的尺寸。

图片定位和更换的逻辑

按照这个逻辑规律,只要在某一个尺寸上更换了图片,大于这个尺寸的屏幕上就会显示这张更换了的图片。

因此,还可以在更大的屏幕尺寸上去更换新的图片,让图片可以根据大中小不同的屏幕尺寸实现三张图片的切换。