我们正在设计一个移动网站的模板,我们遇到了一个问题,我们不知道什么大小的徽标应该是,或背景等.
我们将使用Jquery mobile API和HTML5 / CSS3,它们基本上允许我们创建网站的整个体系结构,而不用担心维度,但是在外部资源(如背景和图像)方面,我们不知道什么是最好的大小为了更多地兼容大多数设备.
解决方法
iPhone 4S / 5具有640像素宽的高分辨率屏幕.许多
Android智能手机顶尖的是720像素宽,尽管有些高达800像素.任何事情都可能被认为是平板电脑.
那么,尽可能广泛的兼容性,最好的事情就是单一的CSS风格：
img { max-width: 100%; height: auto; }
这将确保无论屏幕是什么分辨率,您的图像将不会大于包含它的元素. (当考虑移动用户构建响应式站点时,您的元素宽度,边距和填充应尽可能以百分比计算.)显然,这也意味着您下载的图像数据比许多手机需要的更多,但如果您处理两色标志,并没有什么区别.一如既往,保持尽可能少的图像尽可能小.
另外,如果你不处理照片,你应该看SVG图像.由于它们是基于矢量的,所以他们会以任何分辨率和they’re compatible with pretty much every browser except IE8 and Android 2.x完美地调整大小.