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

问题描述

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

<p class='4u 12u(mobile)'> <span class='image fit'> <img src='https://www.haobala.com/wenda/images/pic00.jpg' alt=''> </span></p>

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

问题解答

可能是网格布局的类名。

比如在 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。

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

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

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

可以看下引入文件

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