我是新设计的响应式设计,我正在设计一个宽度为240px的网页,用于旧手机并从那里开始构建。
在我的横幅图片上,这是一张PNG,最好是: 1)从我最大的图像开始,缩小每个媒体查询? 要么 2)从一个小横幅开始,然后为每个断点显示更高分辨率的文件?
拉伸和缩小图像对于矢量图形似乎很好,但在某些GIF和其他图像上看起来相当难看。
所以我不确定是否应该加载一个我操作的横幅图像,或者我是否应该至少有3个图像(手机,平板电脑,桌面尺寸),我加载到某些分辨率触发点。
感谢。
答案 0 :(得分:0)
总的来说,我要说使用媒体查询来查找屏幕大小并使用最适合的图像。
CSS示例:
.banner{
background: url('banner-1024.png') no-repeat;
background-size: 100%;
}
@media all (max-width: 400px){
.banner{
background-image: url('banner-400.png');
}
}
@media all (max-width: 900px){
.banner{
background-image: url('banner-900.png');
}
}
但如果您不希望移动设备上有很多观众,没有时间创建重新调整大小的图片,或者只是想要最少量的CSS,我就是对于所有设备使用大图像从来没有太大的问题。
如果情况确实如此,那么只需使用前四行代码就可以了。你好了。
答案 1 :(得分:0)
使用至少一些图片对我来说很有用,手机(iOS,Android,Opera Mini)似乎选择下载,而不需要桌面设备和中型屏幕设备。我开始使用一个桌面图像,性能太可怕了。然后为每个媒体查询尝试了一些较小的(在240px时质量稍差一点;))。它的速度要快得多。