background-position百分比格子速记法

虽然上次有开文说到background的估值计算，但是实际应用中还是觉得麻烦且有时候计算的微差挺大，最近又发现了一种格子速记的方法，感觉好像挺不错的。

其实最近在做的APP项目中已经在开始重整代码，大部分图标也都打算使用iconfont里面的字体图标来完成，不过前期的页面还在更新当中，一时没办法放弃这种背景图片background-position百分比的方法，在做尝试的时候发现了这种格式速记的方法，比较省事的样子~

background-position百分比格子，首先满足条件的格子有1格，2格，3格，4格，5格，6格，9格，11格，21格，而这些格子可以横纵自己组合，目前我使用的是6*6的格子（我自己沉得这种格子满适用的），而11格和21格还没有用到只是类推出的结果，不过应该也大差不差~

1格比容简单这里就不说了，先从2*1格子来说吧，假设图片默认里面是横排可以放两个图标（横向尺寸对半分），即2格，首先background-position竖向的值即可以写0%也可以写100%，而横向则有区别，第一个图标应是0%，第二个图标应是100%。这时的background-size值是200%，而你实际需要的尺寸则跟百分比是没有关系的。

如果不明白的话不要捉急，后面我会画个图说明一下~

再来说3*2格这种，假设图片横向平分3竖向平分2，即这张图可以存6个小标，这时background-size值是300%，而从左向右从上至下，background-position的值则为：0% 0%、50% 0%、100% 0%、100% 0%、100% 50%、100% 100%，现在有没有发现什么规律呢？

因为格子数越大，图标可放的就越多，再后面的格子就不用文字说了，只再说一下5*1格吧，因为竖向跟横向的规则是一样的，只是方法不一样而已，剩下的可以自己去类推一下~

5*1的格子，即横向平分了5份，从左向右只说position百分比为：0%、25%、50%、75%、100%这五个值。background-size的值为500%;

啦啦啦~开始上图了：

因为background-size的值的计算是实际展示区域的尺寸是没有关系，只跟这个格子与格子总长有关，所以这个值可以说一目了然，上图也有列出来，比如8格的，size的值就是800%。

而且图中也有另外贴出每个格子相差的值，我自己感觉这个就是百分比格子计算的根本。

当然实际应用中可能会出现较特殊情况，例如本来规划的图标就是100px*100px，但是突然有个效果图中图标尺寸需要的是160px*160px，在不影响之前写好的代码和图标的情况下，有两种方法可以解决：
(1)图片整体放大1.6倍
(2)尝试让这个图标占两格或多格

方法1是最省事的，无需怎么计算，直接放大背景图将160px存放在单元格，但是不好的地方就是图片放大后占用的体积也会变大，反而不美。而方法2则需要用到下面说的较复杂（合并多格）的情况，但是在前期说的那些格子中并不是所有的格子都能满足条件，目前可以使用2格、4格、6格、9格、21格，继续看下面这张图吧~

写到这里就差不多了~不过我自己思考的可能会有一些缺陷没有发现的地方，欢迎童鞋讨论与指正~

background-position百分比格子速记法相关推荐

矢量分析关于∇一些矢量恒等式速记法
前言 20200413 最近在学电磁场与电磁波,那几个有∇\nabla∇的矢量恒等式真的够呛啊- 在B站上看到的矢量分析视频, 该大神UP的理解简直到位- ∇\nabla∇看成是有矢量性和微分性的东东 ...
速记法-python输出递减序列
1 背景 Python里面的内置函数range()函数一般输出为递增序列, 如下面几种情况: 1.1 range实例 for i in range(10):print(i) 输出为: 0 1 2 3 ...
日语五十音图龙泉速记法
あ(安) い(以) う(乌) え(e元/电子货币) お(哦) か(加) き(起) く(COOL) けこ(CALL) さ(sa) し(胡须) す(苏) せ(世界) ...
超级应用/_超级应用
超级应用/ 这么多的功能,很少的时间 (So many features, so little time) In the past couple of years, super apps have t ...
css的background
背景属性--background是css中的核心属性.你应该对它有充分的了解.这篇文章详细讨论了background的所有相关属性,甚至包括background-p_w_upload,还为我们介绍了它 ...
HTML背景渐变圆圈,背景渐变：html5+css3中的background: -moz-linear-gradient 用
在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. 背景使用CSS渐变显示可以不使用图像就实现两 ...
html5+css3中的background: -moz-linear-gradient 用法
http://hi.baidu.com/zyyhyzazwm/item/72dc6c9a40513acf1a49df56 在CSS中background: -moz-linear-gradient 让 ...
七、CSS背景（background简写）
CSS 背景属性用于定义 HTML 元素的背景,通过背景属性我们可以定义元素的背景颜色.背景图片.背景图片的平铺方式和显示位置等. 1.background-color background-colo ...
css 前端设计师必知的background属性（有CSS3内容）
背景属性--background是css中的核心属性.你应该对它有充分的了解.这篇文章详细讨论了background的所有相关属性,甚至包括background-attachment,还为我们介绍了它 ...

background-position百分比格子速记法

background-position百分比格子速记法相关推荐

最新文章

热门文章