2012-08-03 74 views
1

手机网站我有一个大的图像背景铅生成页面http://minkstock.com一个大背景图片网站

我想使它手机兼容,但不希望加载我使用的背景桌面上的巨大图像和平板网站。

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

+4

CSS媒体查询 - >不同的图像设置为背景不同的图像 – kirilloid 2012-08-03 21:59:45

+0

@kirilloid因为我设置图像重置为全长我使用这种方法http://paulmason.name/item/full-screen-background -image-pure-css-code – 2012-08-03 22:03:23

+0

只是一点点:在主页注册表单上,你有两个Ls的Emaill地址:) – VictorKilo 2012-08-03 22:06:14

回答

2

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

可选(如果你不想采用css背景): 你有没有选过Foresight.js plugin?它检测浏览器以及数据网络:https://github.com/adamdbradley/foresight.js

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

2

您可以使用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/

+0

因为我设置图像重置为全长我正在使用此方法paulmason.name/item/full-screen-background-image-pure-css-code – 2012-08-03 22:03:39

+0

因此?您仍然可以使用它,但将该CSS规则放入与大屏幕相匹配的媒体查询中,并使用另一个媒体查询用于小屏幕并为其定义另一个背景图像... – devundef 2012-08-03 22:06:38

+0

我正在使用图像作为img对象html。 – 2012-08-03 22:08:57

2

由于@devundef建议,可以利用媒体查询。但是,您的基本实现应该是针对媒体查询的移动体验,以覆盖全尺寸图像的背景。