問題描述

在一個網(wǎng)站上看到這個CSS代碼，

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

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

問題解答

可能是網(wǎng)格布局的類名。

比如在 Sass（去查下 Sass/SCSS） 里寫好每一 u 代表多少 px 的寬，然后統(tǒng)一預(yù)編譯好。

在布局的時候如果想使用，直接在標(biāo)簽的屬性上加上對應(yīng)的布局的類就可以重復(fù)利用了。

可以去查一下典型的 Blueprint 框架（這個已經(jīng)不再更新了，但是資料應(yīng)該是很好懂的）。新的布局框架比如 Susy，看一下手冊里介紹的網(wǎng)格布局方式，有圖解，看了就知道為什么要這樣命名類，以及這個類對應(yīng)的屬性大概是什么樣子的，以及類的用途和用法。

上面是說可以通過查什么來了解類名為什么要這樣寫，我簡單舉個例子：

/* 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 預(yù)編譯器生成，不是一點(diǎn)一點(diǎn)自己寫的，如果要在某個元素上進(jìn)行布局，就直接給標(biāo)簽添加多個對應(yīng)已經(jīng)寫好的類就可以了。然后就能比較簡單和整齊的進(jìn)行布局。

比如題目描述中的，4u 12u(mobile) 可能就是指這個 p 在 PC 端上顯示為 4 倍的單位寬度 u，在移動端上因?yàn)槭謾C(jī)的像素密集度很高，所以需要更寬的寬度（12 倍的 u），才能瀏覽起來不顯得太小。

再添加一些，上面的代碼是告訴你，這些 CSS 文件是怎么生成的，因?yàn)樗窍裆厦婺菢由傻模瑳Q定了它的命名是很有規(guī)則的，并且在添加這些類的時候，能比較清晰的知道自己在對標(biāo)簽加了些什么。

使用起來就像下面這樣：

/* 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名字，估計(jì)一個是PC，一個是mobile的，奇怪的是class名字怎么加了括號。給下原址看看。

有可能是class被設(shè)置參數(shù)！最好發(fā)下地址看下

只是個class的命名而已，只有作者明白。class命名可以五花八門。這個細(xì)節(jié)可以忽略，不影響學(xué)習(xí)前端知識。

可以看下引入文件

從類名上來判斷，在PC端是12/4的布局，移動端是12/12的布局.可以參考bootstrap