[英]How to make Responsive Images for mobile experiences
UPDATE
我有全屏背景图片。 这为移动浏览带来了问题,因为图像很大且高分辨率。
接下来的问题是视网膜显示器如何设计/程序员如何准备处理这个问题? 我看到很多关于如何在图像之间切换的文章。 但后来我对像素密度与分辨率过分混淆。 需要的时间和地点以及如何以及为何将其作为目标。
例:
*全屏背景图像,分辨率为1900x1080和72dpi。 为了获得最佳优化,每个分辨率/像素密度应该有多少个图像? 此外,鉴于这种情况,哪个库/插件/语义最适合解决这种情况?
最后,如果我使用媒体查询来定位和切换背景图像,它会下载所有图像吗? 或者只是满足要求?
@media (min-device-width : 768px)
and (max-device-width : 1024px) {
background-image:url('paper1024.png');
}
@media only screen
and (min-width : 1824px) {
background-image:url('paper1900.png');
}
谢谢堆栈
//旧问题并没有删除它以用于评论目的//
所以我正在建立一个全屏图像的响应式网站。 我一直在遇到的问题是原始图像对于移动下载而言要大得多。
作为响应式设计的新手,我不知道这是一个问题,并且我自己也不予理睬。 我读了几篇文章
最好的是:
http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/
我的问题是:我不相信<picture>
标签对公众开放? 我无法找到任何更多信息。
有谁知道这是否允许? 此外,有关如何正确使用它的更多信息/文档。
如果picture
不适用。 是否有任何“ 标准 ”的关注,使图像响应膨胀的移动带宽?
这是我在上一个项目中进行视网膜检查的方式:
首先使用background-image在普通css中设置桌面图像:
#bg {
background: image-url('wallpaper_desktop.jpg') center top;
background-size: 1024px 768px;
}
然后,我用iphone等手机:
@media only screen and (min-device-width: 320px) and (max-device-width: 480px){
#bg {
background: image-url('wallpaper_mobile.jpg') center top;
background-size: 320px 480px;
}
}
然后它涉及视网膜图像处理。 使用图像,大小加倍(请参阅文件名中的“@ 2x”):
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
#bg {
background: image-url('wallpaper_mobile@2x.jpg') center top;
background-size: 320px 480px; // Original size
}
}
由于还有带Retina显示屏的iPad和MacBook,我们应该考虑为它们提供更大和高分辨率的版本,与高分辨率手机相比:
@media only screen and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2) {
background: image-url('wallpaper_desktop@2x.jpg') center top;
background-size: 1024px 768px;
}
所以,通常我每个图像使用4个版本。 2个桌面版本(一个用于视网膜显示屏的尺寸加倍)和2个移动版本(另一个用于视网膜显示屏的尺寸加倍)
顺便说一句:当使用媒体查询附加图像时,没有其他请求。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.