html - 大型背景图片网站的移动网站

Question

我有一个大的图像背景潜在客户生成页面http://minkstock.com

我想让它与移动设备兼容，但不想加载我在桌面和平板电脑网站上用作背景的巨大图像。

这是防止它在手机上加载的最佳方法。

Answer 1

您可以使用 css 媒体查询。

例子：

// this background will apply only for screen sizes between 320 and 480px
@media only screen 
   and (min-device-width : 320px) 
   and (max-device-width : 480px) {
     background-image: none; // or another image...
}

更多信息： http ://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 2

正如@devundef 建议的那样，您可以利用媒体查询。但是，您的基本实现应该是用于媒体查询的移动体验，以使用全尺寸图像覆盖背景。

Answer 3

@devundef 是对的。我们通常从 CSS 中调用背景图像。在这种情况下，CSS3 媒体查询就足够了。我也建议遵循这个规则。

可选（如果您不想采用 css 背景）：您是否检查过Foresight.js插件？它检测浏览器以及数据网络：https ://github.com/adamdbradley/foresight.js

它为您提供了根据用户的浏览器和连接类型进行自适应图像替换的选项。好消息是您也不必删除背景，并且能够保持 UI 的一致性。