css3 - 这个CSS样式是什么意思？

Question

在一个网站上看到这个CSS代码，

<p class="4u 12u(mobile)">
   <span class="image fit">
      <img src="images/pic00.jpg" alt="">
   </span>
</p>

CSS代码中的"4u 12u(mobile)" 是什么意思？ 谢谢

Answer 1

可能是网格布局的类名。

比如在 Sass（去查下 Sass/SCSS） 里写好每一 u 代表多少 px 的宽，然后统一预编译好。

在布局的时候如果想使用，直接在标签的属性上加上对应的布局的类就可以重复利用了。

可以去查一下典型的 Blueprint 框架（这个已经不再更新了，但是资料应该是很好懂的）。新的布局框架比如 Susy，看一下手册里介绍的网格布局方式，有图解，看了就知道为什么要这样命名类，以及这个类对应的属性大概是什么样子的，以及类的用途和用法。

上面是说可以通过查什么来了解类名为什么要这样写，我简单举个例子：

/* SCSS */
$u: 10;
@for $i from 2 through 24 {
    .layout#{$i} {
        width: $i * $u px;
    }
}

用 Compass 生成如下：

/* CSS */
.layout2 { width: 20 px; }

.layout3 { width: 30 px; }

.layout4 { width: 40 px; }

.layout5 { width: 50 px; }

.layout6 { width: 60 px; }

.layout7 { width: 70 px; }

.layout8 { width: 80 px; }

.layout9 { width: 90 px; }

.layout10 { width: 100 px; }

.layout11 { width: 110 px; }

.layout12 { width: 120 px; }

.layout13 { width: 130 px; }

.layout14 { width: 140 px; }

.layout15 { width: 150 px; }

.layout16 { width: 160 px; }

.layout17 { width: 170 px; }

.layout18 { width: 180 px; }

.layout19 { width: 190 px; }

.layout20 { width: 200 px; }

.layout21 { width: 210 px; }

.layout22 { width: 220 px; }

.layout23 { width: 230 px; }

.layout24 { width: 240 px; }

上面这些类由 CSS 预编译器生成，不是一点一点自己写的，如果要在某个元素上进行布局，就直接给标签添加多个对应已经写好的类就可以了。然后就能比较简单和整齐的进行布局。

比如题目描述中的，4u 12u(mobile) 可能就是指这个 p 在 PC 端上显示为 4 倍的单位宽度 u，在移动端上因为手机的像素密集度很高，所以需要更宽的宽度（12 倍的 u），才能浏览起来不显得太小。

再添加一些，上面的代码是告诉你，这些 CSS 文件是怎么生成的，因为它是像上面那样生成的，决定了它的命名是很有规则的，并且在添加这些类的时候，能比较清晰的知道自己在对标签加了些什么。

使用起来就像下面这样：

/* SCSS */

#element1 {
    @extend .layout20;
}

#element2 {
    @extend .layout24;
}

#element 3 {
    @extend .layout20;
}

生成的 CSS 如下

/* CSS */
.layout20, #element1, #element3 { width: 200 px; }
.layout24, #element2 { width: 240 px; }

建议去查一下 Sass/SCSS。

Answer 2

就是class名字，估计一个是PC，一个是mobile的，奇怪的是class名字怎么加了括号。给下原址看看。

Answer 3

有可能是class被设置参数！最好发下地址看下

Answer 4

只是个class的命名而已，只有作者明白。class命名可以五花八门。这个细节可以忽略，不影响学习前端知识。

Answer 5

可以看下引入文件

Answer 6

从类名上来判断，在PC端是12/4的布局，移动端是12/12的布局.可以参考bootstrap