可能是網格佈局的類別名稱。

例如在 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