首页风格
门户
博客

前端性能优化:使用媒体查询加载指定大小的背景图片

日期:2013-7-8  来源:GBin1.com

前端性能优化:使用媒体查询加载指定大小的背景图片

直到CSS @supports被广泛支持,CSS媒体查询的使用接近于CSS中写逻辑控制。我们经常用CSS媒体查询来根据设备调整CSS属性(通常根据屏幕宽度调 整CSS属性),例如根据不同的屏幕宽度来设置不同的元素宽度或者是悬浮位置。那么我们为什么不用这种方式来改变背景图片呢?

/* 默认是为桌面应用加载图片 */
.someElement { background-image: url(sunset.jpg); }

@media only screen and (max-width : 1024px) {
.someElement { background-image: url(sunset-small.jpg); }
}

上面的代码片段是为手机设备或是类似的移动设备加载一个较小尺寸的图片,特别是需要一个特别小的图片时(例如图片的大小几乎不可视)。

开发人员普遍会将他们的代码习惯优先于用户体验。但是很多很小的改变可以让用户体验有个飞跃提升,所以任何一点儿小小的优化都会提升你网站的库存。再回顾一下之前的这些优化,我将在以后继续介绍其他的优化。

via 极客社区

来源:前端性能优化:使用媒体查询加载指定大小的背景图片

喜欢我们的文章请您与朋友分享:

?ü?à

留言

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com


  1. Troland

    此评论在等待批准中

    2013-7-8 下午9:31
今日推荐