举例来说，在后台中找到首页Banner图片。
一般而言，Banner图片在电脑端显示时，采用传统横向（宽度大于高度）的尺寸会更合适。而在手机端Banner图片则以竖向（宽度小于高度）的尺寸更为合适。
这张Banner图在小尺寸的屏幕（也就是在手机端打开的时候）看起来就太小，这时我们就需要单独对小屏幕的Banner图进行设置。
手机小屏图片的定位和更换
STEP 01
在工作区上方的橙色响应条上对网页的尺寸进行选择，然后定位到“手机小屏”的地方。
定位的两端被叫做“断点”
STEP 02
然后双击图片位置进入素材库，找到需要更换的新的图片。这时，更换成功后，调试屏幕尺寸时就会发现在所有的尺寸下的图片都被更换了。
手机大屏图片的定位和更换
在网页的尺寸大于手机大屏时，我们希望依然保留最开始的传统横向式Banner图片，这时需要又一次进行定位和更换。
STEP 03
在工作区上方的橙色响应条上对网页的尺寸进行选择，然后定位到“手机大屏”的地方。
STEP 04
然后双击图片位置进入素材库，找到最开始的传统横向式Banner图片。这时，更换成功后，调试屏幕尺寸时就会发现在大屏以上的Banner图恢复了原来的传统横向，而在手机小屏的时候，图片就会切换为竖向的尺寸。
图片定位和更换的逻辑
按照这个逻辑规律，只要在某一个尺寸上更换了图片，大于这个尺寸的屏幕上就会显示这张更换了的图片。
因此，还可以在更大的屏幕尺寸上去更换新的图片，让图片可以根据大中小不同的屏幕尺寸实现三张图片的切换。