[Phonegap+Sencha Touch] 移动开发59 移动web页面N宫格图标布局怎么实现？

原文地址：http://blog.csdn.net/lovelyelfpop/article/details/47806357

很多人不知道要如何实现图标的N宫格布局。我来说下思路。

一、等宽占比

其实就是一行要显示几列的问题，也就是一行里的各个图标占宽度相同。

1. 如果要一行显示3个图标，那就是每个图标宽度占33.3333%
2. 如果要一行显示4个图标，那就是每个图标宽度占25%
3. 如果要一行显示5个图标，那就是每个图标宽度占20%

div布局就是，外层一个宽度100%的div，里面N个图标div（display： inline-block）。里面的图标div根据你要的效果设置不同的width占比。

如果你想要在不同尺寸和分辨率的屏幕上显示不同的列数，比如iphone4上一行3个，iphone5上一行4个，iphone6 plus上一行5个，可以百度查找“@media screen”的相关知识，实现响应式布局（参看下面附一）。

二、图标显示为正方形或者正圆形

图标宽度自适应了，如何使图标的宽高一样（即正方形，或者加了圆角的正圆形）

百度查找“css 自适应 正方形”，也能搜索到一堆结果（参看下面附二）。

这样，用纯css就可以实现自适应屏幕的正方形或正圆形N宫格布局。

---

附一：@media screen 针对不同尺寸屏幕实现响应式设计

概念：

1. device-pixel-ratio：定义输入设备屏幕的可视宽度与可见高度比率。

2. device-width：输入设备屏幕的可视宽度。

3. orientation ：屏幕横竖屏定向。landscape 是横向，portrait 是纵向【ipad 相反】

1. /* iPhone 4 ———– */

2. @media

3. only screen and (-webkit-min-device-pixel-ratio : 1.5),

4. only screen and (min-device-pixel-ratio : 1.5) {

5. /* Styles */

6. }

7. /* iPads (portrait) ———– */

8. @media only screen

9. and (min-device-width : 768px)

10. and (max-device-width : 1024px)

11. and (orientation : portrait) {

12. /* Styles */

13. }

1. /* Smartphones (portrait and landscape) ———– */

2. @media only screen

3. and (min-device-width : 320px)

4. and (max-device-width : 480px) {

5. /* Styles */

6. }

7. /* Smartphones (landscape) ———– */

8. @media only screen

9. and (min-width : 321px) {

10. /* Styles */

11. }

12. /* Smartphones (portrait) ———– */

13. @media only screen

14. and (max-width : 320px) {

15. /* Styles */

16. }

17. /* iPads (portrait and landscape) ———– */

18. @media only screen

19. and (min-device-width : 768px)

20. and (max-device-width : 1024px) {

21. /* Styles */

22. }

23. /* iPads (landscape) ———– */

24. @media only screen

25. and (min-device-width : 768px)

26. and (max-device-width : 1024px)

27. and (orientation : landscape) {

28. /* Styles */

29. }

30. /* iPads (portrait) ———– */

31. @media only screen

32. and (min-device-width : 768px)

33. and (max-device-width : 1024px)

34. and (orientation : portrait) {

35. /* Styles */

36. }

37. /* Desktops and laptops ———– */

38. @media only screen

39. and (min-width : 1224px) {

40. /* Styles */

41. }

42. /* Large screens ———– */

43. @media only screen

44. and (min-width : 1824px) {

45. /* Styles */

46. }

47. /* iPhone 4 ———– */

48. @media

49. only screen and (-webkit-min-device-pixel-ratio : 1.5),

50. only screen and (min-device-pixel-ratio : 1.5) {

51. /* Styles */

52. }

---

附二、纯CSS实现自适应正方形 [转]

在处理移动端页面时，我们有时会需要将banner图做成与屏幕等宽的正方形以获得最佳的体验效果，如Flipbord的移动页面：

那么应该怎么使用纯 CSS 制作出能够自适应大小的正方形呢？

方案一：CSS3 vw 单位

CSS3 中新增了一组相对于可视区域百分比的长度单位 vw, vh, vmin, vmax。其中 vw 是相对于视口宽度百分比的单位，1vw = 1% viewport width， vh 是相对于视口高度百分比的单位，1vh = 1% viewport height；vmin 是相对当前视口宽高中 较小 的一个的百分比单位，同理 vmax 是相对当前视口宽高中 较大 的一个的百分比单位。该单位浏览器兼容性如下：

利用 vw 单位，我们可以很方便做出自适应的正方形：

实现效果

优点：简洁方便

缺点：浏览器兼容不好

方案二：设置垂直方向的padding撑开容器

在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding 的百分比数值计算。按照规定，margin, padding 的百分比数值是相对 父元素宽度 的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了：

1

2

3

4

.placeholder {

  width: 100%;

  padding-bottom: 100%;

}

实现效果

这时一切看起来都很正常，我们试着给容器内增加内容：

咦？高度怎么溢出了？我们来看这时的盒模型：

如图中所示，内容区域占据了 38px 的高度。为了解决这个问题，我们可以设置容器的高度为 0：

1

2

3

.placeholder {

  height: 0;

}

这种方案简洁明了，且兼容性好；但是除了填充内容后会出现问题以外，还有可能碰上max-height不收缩：DEMO，于是第三种方案来了：

方案三：利用伪元素的 margin(padding)-top 撑开容器

在方案二中，我们利用百分比数值的 padding-bottom 属性撑开容器内部空间，但是这样做会导致在元素上设置的 max-height 属性失效：

而失效的原因是max-height 属性只限制于 height，也就是只会对元素的 content height 起作用。那么我们是不是能用一个子元素撑开 content 部分的高度，从而使 max-height 属性生效呢？我们来试试：

1

2

3

4

5

6

7

8

.placeholder {

  width: 100%;

}

.placeholder:after {

  content: '';

  display: block;

  margin-top: 100%; /* margin 百分比相对父元素宽度计算 */

}

一刷新页面，啊嘞？怎么什么也没有？

这里就涉及到margin collapse的概念了，由于容器与伪元素在垂直方向发生了外边距折叠，所以我们想象中的撑开父元素高度并没有出现。而应对的方法是在父元素上触发 BFC：

1

2

3

.placeholder {

  overflow: hidden;

}

注：若使用垂直方向上的 padding 撑开父元素，则不需要触发 BFC

实现效果

OK，父元素被撑起来了，我们再试一试设置 max-height：

完美！什么？你说元素内部添加内容时高度会溢出？来人，把这个叛徒拖出去喂狗！对于这样的情况，可以将内容放到独立的内容块中，利用绝对定位消除空间占用。

结语

以上就是我目前所想到的三种制作自适应正方形的方案，抛去 CSS3 中的视口相对单位，主要利用到 margin, padding 的百分比数值相对父元素宽度的宽度计算得出 来制作宽高相等、且相对视口宽度自适应的正方形。如果需求是制作相对视口高度自适应的正方形，估计就只能使用 vh 单位了吧~