关于手机端CSS Sprite图标定位的一些领悟
今天在某个群里面闲逛,看见一个童鞋分享了一个携程的移动端的页面。
地址这里我也分享下吧:http://m.ctrip.com/html5/在手机端我都很少用雪碧图合并定位图标,用的比较多就是用字体图标来代替,有些图标不多的时候就自己单个的切出来控制了。
看了下携程的手机端的网站这些图标是用了雪碧图来合并的,因为一直以来手机端的屏幕大小不一,所以通常都会把设计图等比例缩放的形式展现,百分比的方式来布局,达到自适应。
下面我们就来说说这个携程手机端的案例吧:
首先这个雪碧图的原理与PC端的是一样的,只不过手机端的要按比例缩放一下。
首先是合并的雪碧图:
大家发现没有,雪碧图的尺寸与原图刚好缩放了2倍。
再个就是原始 宽度和高度,以及图标的坐标位置。很明显通常元素的宽度和高度也就是要显示的图标的宽度和高度,这里也要缩放2倍。
下面的图就是其中某个显示图标元素,包括宽度、高度和左边值刚好都是缩放过2倍的,所以看到这里都明白了吧,手机端的雪碧图就是这么做的,也挺简单的吧,比PC端就是多了一步缩放的计算,哈哈。
关于手机端CSS Sprite图标定位的一些领悟的更多相关文章
- 手机端css实现active伪类
今天遇到手机端的css中a标签的active不起作用,原本想循环a标签,给当前的a标签添加class来解决,可觉得有点儿小麻烦,经查资料了解到解决此问题,只需要添加一个touchstart的空事件即可 ...
- CSS Sprite 图标
HTML <body> <!-- ul.sprite>li*5>s.s-icon+a{CSS Sprite} --> <!-- 以上是Sublime Text ...
- 手机端 css 样式重置
@charset "utf-8"; body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, ...
- 第九十三节,html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计
html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...
- 手机端网页使用html5地理定位获取位置失败的解决办法
网上有很多关于html5 geolocation 获取地理定位的方法,我试了下,只有在IE edge浏览器可以成功获取到,在chrome,firefox,手机端的safari,QQ浏览器,微信浏览器, ...
- css的盒模型手机端兼容写法应该是啥样的呢?
前言:刚刚接触css3的盒模型,感觉对于解决水平垂直居中.固定宽度/高度和可变宽度/高度同时存在这样的问题很有效.但是最近在看一个腾讯手机端框架(Frozen UI )的时候发现一个很神奇的多行文字截 ...
- 【百度地图JavaScript API】手机端浏览器定位的实现
[百度地图JavaScript API]手机端浏览器定位的实现 https://blog.csdn.net/xiao190128/article/details/72579476
- 简单手机端头部设置 及css代码
<html> <head> <title>今日报表</title> <meta http-equiv="Content-Type&quo ...
- 自动PC端显示 手机端隐藏CSS代码判断实现
实现场景描述: 有些内容部署在PC端但是有不适合在手机端显示(比如盒子过大,遮挡内容)或者手机端显示毫无意义等.我们可以使用下面的代码来实现:电脑端显示,手机端隐藏 实现方法: CSS控制判断 @me ...
随机推荐
- 第十一章、认识与学习 BASH Bash Shell 的操作环境
bash中的变量动不动就说环境变量,真是奇怪,bash只是一个c语言编写的程序而已,跟环境变量有什么关系?如果知道dos的历史的话就知道有个时代是只有命令行界面而没有图形用户界面,这只小小的程序就包揽 ...
- express4.x 路由中间件
路由中间件必须通过app挂载到对应的路由上,如: var express = require('express'); var router = express.Router(); var app = ...
- Hibernate查询之Example查询
org.hibernate.criterion.Example 类允许你通过一个给定实例构建一个条件查询. 此实例的属性值将做成查询条件. Cat cat = new Cat(); cat.setSe ...
- 開始折腾cocos2d-x,使用批处理来创建项目
開始抽出时间学习cocos2d-x了.尽管C和C++还都不咋地.只是在开发中学习记忆也许会更深吧. so决定从今天開始正式学习的用自己的空暇时间折腾它了.正好这个五一没什么事.昨天搭建了一下开发环境. ...
- c# 请问如何将四个RadioButton分成两组?
WinForm 只要放在同一个容器中的RadioButton 就自动互斥 创建两个panel容器,分别放两个RadioButton 就是两组了
- vim阅读c++代码的快捷键
未完,待总结 1. 首先适用ctags建立当前工作目录的标签: cd /home/wanglc/WorkDirectory ctags -R or ctags -R * 命令结束以后,会生成一个tag ...
- Intra-cluster Replication in Apache Kafka--reference
Kafka is a distributed publish-subscribe messaging system. It was originally developed at LinkedIn a ...
- 亲测git与github
1.安装MyEclipse 8.5,略去不表.2.下载Eclipse的git插件——EGit.下载网址http://download.eclipse.org/egit/updates-1.3/org. ...
- java 流程执行 循环 foreach循环
一. if分支 1. 结构 if else if else 2.执行原则 if if if 结构 会一直去执行()里的判断语句 if else if else if 结构 只要一条( ...
- mac 神奇时光机
http://bbs.zol.com.cn/nbbbs/d544_8216.html