• 前端分享学习博客,探究前端相关技术,推动天朝前端发展,有任何问题都可以留言一起探究
  • 由于站内自链接问题,部分pre中的代码首字母使用大写以过滤筛选
  • 欢迎友链互换,还有,如果有大神请不要黑我的站点(o´・ェ・`o)
  • 如果你觉得博客还不错,请Ctrl+D收藏( *︾▽︾)

自适应页面中如何使用雪碧图

Html/Css 薛 陈磊 1715次浏览 已收录 0个评论 扫描二维码

自适应页面你肯定听说过,雪碧图想必你也听说过,不过在自适应页面中使用雪碧图应用的场景却不多,因为很多场景里自适应页面(移动端页面)的小图标啥的基本都做成字体图标了,操作起来也比较方便,不过有时候合成字体图标的时候也比较麻烦,AI制作复杂svg矢量图标很麻烦,今天说的这个应用场景用的就是这个情况;

首先你要知道什么是雪碧图,不知道的先科普之,百毒传送门

上面说到有的场景添加字体图标很麻烦,如果不理解看下图就明白了:

  自适应页面中如何使用雪碧图

没错,就是这个国旗,有几十个国家的,这要搞成svg矢量图那要累死了(如果有大神有快速牛逼的解决方案请告诉我),网上下载的也不尽全面,当然还有种方案是做成单个图片,src引用,不过这个图片有点多,对于移动端http回话太多了,参考前端优化的原则不想用这种方法,所以想到pc上经常用的雪碧图的处理方式,也就是background:url(..flag.png) no-repeat,加上各个国旗的position值就可以了,问题是当页面处于不同尺寸下时,雪碧图一直是初始大小,无法随着自适应尺寸变化,导致该出现国旗的区域在每个尺寸下显示的不同,问题的核心就是控制雪碧图显示尺寸随着自适应尺寸变化;

页面部分html如下:

自适应页面中如何使用雪碧图

其中.currency定义雪碧图,定义宽和高,gdp等部分是各个国旗的positiion,具体css如下:

自适应页面中如何使用雪碧图

.currency_icon {
    background: url(../images/nationalflag.png) no-repeat;
    background-size: 2.4rem 42.9rem;
    width: 2.4rem;
    height: 1.5rem;
    margin-right: .5rem}.gbp {
    background-position: 0 -1.8rem}

自适应页面中如何使用雪碧图

注意这其中有个css3中的 background-size的定义,这是个很少用到的css3属性,顾名思义可以定义所引用的背景的size,并且是使用rem定义值,与自适应页面是一套标准在里面(ps:这些页面自适应是用rem值写的),所以这里雪碧图就和自适应页面相关联,解决了上述自适应雪碧图尺寸的问题。

   background-size语法:background-size: length|percentage|cover|contain;

  自适应页面中如何使用雪碧图

  

 本篇文章对应实例页面,请戳这里注意如果打开是乱页面(ie 360浏览器请自动关掉),这里使用的是htts协议,服务器貌似在国外,证书安装的问题,要右键查看源查看引用的css,这个时候会提示是非安全访问,无视就行了(貌似是https证书的问题)


薛陈磊的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明自适应页面中如何使用雪碧图
喜欢 (3)
[905044086@qq.com]
分享 (0)
作者薛陈磊
关于作者:
非著名前端工程师,关注Html5、Css3、Javascript、Node.js和各种前端框架发展,学习管理技巧和团队建设方法,期待遇到更多前端小伙伴一起学习进步;
说点什么...
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址