不同尺寸的设备使用不同的背景图像

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

国庆活动:订阅年付会员送 6 个月,重订、续订送 12 个月。订阅 →

如果图像是背景图像话,使用媒体查询,可以根据可视窗口的尺寸来决定使用的背景图像 …

这里我准备了一张 480px 的背景图像 … 为了区别一下 … 在图像上,我添加了一个标示 …

决定把这张背景图像,应用在可视窗口宽度小于或者等于 480px 的时候 …

我们先去改造一下 showcase 里的背景的样式的写法 …

bgi

bgp50p50p

bgrn

background-image: url(../images/01.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;

这样的话,在其它的媒体查询里,我们可以直接使用 background-image ,去覆盖掉默认的背景图像 ….

在样式表的最下面,去定义一个媒体查询 … @media (max-width:480px){}

当可视窗口小于或者等于 480px 的时候 … 应用在大括号里定义的样式 …
#showcase{}

bgi ..images/01_s.jpg …

我们把背景图像改成了 01_s.jpg … 这张图像的宽度是 480px …. 保存一下 ….

打开浏览器 … 调整窗口宽度 … 窗口宽度小于等于 480px 的时候 … 背景图像会变成 01_s.jpg 这张图像 …

下面我们使用 iOS 模拟器,去预览一下 ….

现在用的是普通屏幕的 iPhone … 垂直状态下,它的宽度是 320px … 所以,会使用 480px 的背景图像 …

调整成水平方向 … 这样,设备的宽度就变成了 480px ,也会应用 480px 的背景图像 …

下面我们换成 Retina 屏幕的 iPhone 去试试看 …

同样会使用 480px 的背景图像… 不过 Retina 屏幕的 iPhone ,垂直状态下,水平可以显示 640 个像素 ….

而我们的背景图像的宽度是 480px .. 所以,你会发现 … 图像会被拉伸 …. 这样会变得有点模糊 ….

下面视频,我们再去解决这个问题 …

不同尺寸的设备使用不同的背景图像《 响应式网页设计 》

统计

11228
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点