我的图片在移动网站上应该有多大
我们正在为一个移动网站设计一个模板，我们遇到了一个问题，我们不知道徽标的大小，或者背景等。
我们将使用Jquery mobile API和HTML5 / CSS3，这基本上允许我们创建站点的整个架构，而不用担心尺寸，但是对于外部资源，如背景和图像，我们不知道什么是最好的尺寸，以便与大多数设备更兼容。
回答 4
Stack Overflow用户
发布于 2012-10-12 05:50:18
iPhone 4S/5拥有640像素宽的高分辨率屏幕。许多安卓智能手机的最高宽为720px，但也有一些高达800px。超过这一点的任何东西都可能被认为是平板电脑。
那么，就广泛的兼容性而言，您能做的最好的事情就是单一的CSS样式：
img { max-width: 100%; height: auto; }这将确保无论屏幕分辨率是什么，您的图像都不会大于包含它的元素。(在构建一个考虑到移动用户的响应式站点时，您的元素宽度、页边距和填充都应该尽可能以百分比计算。)显然，这也意味着你下载的图像数据比许多手机所需的要多，但如果你正在处理双色标志，这并没有太大的区别。一如既往，让你的图片尽可能的少和小。
此外，如果您不是在处理照片，则应该查看SVG图像。因为它们是基于矢量的，所以它们可以在任何分辨率和they're compatible with pretty much every browser except IE8 and Android 2.x下完美地调整大小。
Stack Overflow用户
发布于 2017-01-28 03:12:48
我确信图像大小通常不应该更像它定义的CSS媒体查询标准。
以下是2015-2016年度最受欢迎设备的CSS媒体查询简短列表。
如果需要，只需将新设备的媒体静音器添加到此列表中。
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}还要看一下较旧的列表https://css-tricks.com/snippets/css/media-queries-for-standard-devices/和https://gist.github.com/hs0ucy/3762901
Stack Overflow用户
发布于 2012-10-12 08:29:23
考虑下面的html代码：
<img src="images/myimage.jpg" alt="image">看一下这个例子，我们需要多个图像，这取决于屏幕的大小。由于大多数浏览器首先查看HTML文档，并在加载Javascript之前预先加载图像，因此Javascript不是一个完美的解决方案。
这就是为什么：使用响应式图像服务器！
我用过，它会计算出设备的屏幕并缩小(it only会缩小图像)你的图像以符合它的屏幕大小限制。Sencha.io使用浏览器用户代理字符串在其数据库中查找设备。然后它会将您的图像缩小到设备的最大宽度，并将其存储在缓存中，该缓存将可用30分钟。
像这样使用它：
<img src="http://src.sencha.io./http://[your domain and path]/images/myimage.jpg" alt="image">PS:它也有缺点:它依赖于设备检测，需要您通过第三方路由所有图像。但由于它们目前并不是很好的解决方案(即使是媒体查询，你也必须处理浏览器，因为浏览器在媒体查询中下载资源是不适用的)-我希望这会对你有所帮助！
https://stackoverflow.com/questions/12848764
复制相似问题
腾讯云开发者
