問題描述

在一個網站上看到這個CSS代碼，

<p class='4u 12u(mobile)'> <span class='image fit'> <img src='http://www.aoyou183.cn/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