在一个网站上看到这个CSS代码，
<p class="4u 12u(mobile)">
<span class="image fit">
<img src="images/pic00.jpg" alt="">
</span>
</p>CSS代码中的"4u 12u(mobile)" 是什么意思？ 谢谢
伊谢尔伦2017-04-17 11:36:11
可能是网格布局的类名。
比如在 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。
