今天在某个群里面闲逛,看见一个童鞋分享了一个携程的移动端的页面。
地址这里我也分享下吧:http://m.ctrip.com/html5/在手机端我都很少用雪碧图合并定位图标,用的比较多就是用字体图标来代替,有些图标不多的时候就自己单个的切出来控制了。

看了下携程的手机端的网站这些图标是用了雪碧图来合并的,因为一直以来手机端的屏幕大小不一,所以通常都会把设计图等比例缩放的形式展现,百分比的方式来布局,达到自适应。

下面我们就来说说这个携程手机端的案例吧:

首先这个雪碧图的原理与PC端的是一样的,只不过手机端的要按比例缩放一下。

首先是合并的雪碧图:

大家发现没有,雪碧图的尺寸与原图刚好缩放了2倍。

再个就是原始 宽度和高度,以及图标的坐标位置。很明显通常元素的宽度和高度也就是要显示的图标的宽度和高度,这里也要缩放2倍。

下面的图就是其中某个显示图标元素,包括宽度、高度和左边值刚好都是缩放过2倍的,所以看到这里都明白了吧,手机端的雪碧图就是这么做的,也挺简单的吧,比PC端就是多了一步缩放的计算,哈哈。

关于手机端CSS Sprite图标定位的一些领悟的更多相关文章

  1. 手机端css实现active伪类

    今天遇到手机端的css中a标签的active不起作用,原本想循环a标签,给当前的a标签添加class来解决,可觉得有点儿小麻烦,经查资料了解到解决此问题,只需要添加一个touchstart的空事件即可 ...

  2. CSS Sprite 图标

    HTML <body> <!-- ul.sprite>li*5>s.s-icon+a{CSS Sprite} --> <!-- 以上是Sublime Text ...

  3. 手机端 css 样式重置

    @charset "utf-8"; body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, ...

  4. 第九十三节,html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计

    html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...

  5. 手机端网页使用html5地理定位获取位置失败的解决办法

    网上有很多关于html5 geolocation 获取地理定位的方法,我试了下,只有在IE edge浏览器可以成功获取到,在chrome,firefox,手机端的safari,QQ浏览器,微信浏览器, ...

  6. css的盒模型手机端兼容写法应该是啥样的呢?

    前言:刚刚接触css3的盒模型,感觉对于解决水平垂直居中.固定宽度/高度和可变宽度/高度同时存在这样的问题很有效.但是最近在看一个腾讯手机端框架(Frozen UI )的时候发现一个很神奇的多行文字截 ...

  7. 【百度地图JavaScript API】手机端浏览器定位的实现

    [百度地图JavaScript API]手机端浏览器定位的实现 https://blog.csdn.net/xiao190128/article/details/72579476

  8. 简单手机端头部设置 及css代码

    <html> <head> <title>今日报表</title> <meta http-equiv="Content-Type&quo ...

  9. 自动PC端显示 手机端隐藏CSS代码判断实现

    实现场景描述: 有些内容部署在PC端但是有不适合在手机端显示(比如盒子过大,遮挡内容)或者手机端显示毫无意义等.我们可以使用下面的代码来实现:电脑端显示,手机端隐藏 实现方法: CSS控制判断 @me ...

随机推荐

  1. 第十一章、认识与学习 BASH Bash Shell 的操作环境

    bash中的变量动不动就说环境变量,真是奇怪,bash只是一个c语言编写的程序而已,跟环境变量有什么关系?如果知道dos的历史的话就知道有个时代是只有命令行界面而没有图形用户界面,这只小小的程序就包揽 ...

  2. express4.x 路由中间件

    路由中间件必须通过app挂载到对应的路由上,如: var express = require('express'); var router = express.Router(); var app = ...

  3. Hibernate查询之Example查询

    org.hibernate.criterion.Example 类允许你通过一个给定实例构建一个条件查询. 此实例的属性值将做成查询条件. Cat cat = new Cat(); cat.setSe ...

  4. 開始折腾cocos2d-x,使用批处理来创建项目

    開始抽出时间学习cocos2d-x了.尽管C和C++还都不咋地.只是在开发中学习记忆也许会更深吧. so决定从今天開始正式学习的用自己的空暇时间折腾它了.正好这个五一没什么事.昨天搭建了一下开发环境. ...

  5. c# 请问如何将四个RadioButton分成两组?

    WinForm 只要放在同一个容器中的RadioButton 就自动互斥 创建两个panel容器,分别放两个RadioButton 就是两组了

  6. vim阅读c++代码的快捷键

    未完,待总结 1. 首先适用ctags建立当前工作目录的标签: cd /home/wanglc/WorkDirectory ctags -R or ctags -R * 命令结束以后,会生成一个tag ...

  7. Intra-cluster Replication in Apache Kafka--reference

    Kafka is a distributed publish-subscribe messaging system. It was originally developed at LinkedIn a ...

  8. 亲测git与github

    1.安装MyEclipse 8.5,略去不表.2.下载Eclipse的git插件——EGit.下载网址http://download.eclipse.org/egit/updates-1.3/org. ...

  9. java 流程执行 循环 foreach循环

    一. if分支 1. 结构  if  else if   else 2.执行原则 if  if  if 结构  会一直去执行()里的判断语句 if else if  else if 结构  只要一条( ...

  10. mac 神奇时光机

    http://bbs.zol.com.cn/nbbbs/d544_8216.html