由于最近使用了一段時間的Semantic UI福荸，在項目中做一些響應式的頁面拭宁，所以對Semantic UI的響應式布局開發(fā)有一些經(jīng)驗跳昼，記錄在這里姓迅。
semantic翻譯到中文的意思是語義的敲霍。這也暗示了Semantic UI的最大特點俊马，它的語法定義都是語義化的，這樣有助于我們使用肩杈，使得代碼更容易看懂潭袱。通過一段時間的使用，我認為語義化的網(wǎng)頁代碼確實給開發(fā)帶來了一定的優(yōu)勢锋恬。所以屯换，如果選擇一套順手的前端UI框架的話，我認為Semantic UI是一個很不錯的選擇与学。下面就是一些我使用中的筆記彤悔，希望對你有所幫助。
不同屏幕的區(qū)分
Semantic UI有兩種區(qū)分不同屏幕的方法索守，分別是按照屏幕大小晕窑，還有設備類型來區(qū)分。
-
computertabletmobile -
large screenwidescreen
這幾個變量的用法還是很靈活的卵佛，例如杨赤，如果你的某個元素只在手機上顯示的話，你可以使用：
<div class="mobile only"></div>
如果你的某個元素只想要在大顯示器上顯示的話：
<div class="large screen only"></div>
當然截汪，你還可以定制元素使得每個元素在不同屏幕上的顯示效果不一樣：
<div class="sixteen wide mobile eight wide computer column"></div>
這樣疾牲，就輕松地設置了在電腦端占8格寬度，而手機端占16格寬度衙解。然而這樣的設置有些繁瑣阳柔，你需要給每一個元素設置大小。Semantic UI還提供了一些更方便的功能蚓峦。
使元素在移動端自動占一行寬度
使用stackable可以是你的元素在手機端自動擴展舌剂，例如：
<div class="ui stackable six wide column"></div>
這樣的設置，可以使這個div在手機端自動占一行的寬度暑椰，而在其他設備上，按照six wide column的寬度布局
使元素在不同的設備自動擴展
使用doubling一汽，當設備改變時避消，自動更改自身顯示的屬性，例如：
<div class="doubling eight column row">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
在上面的例子中角虫，設置了四個column沾谓，這樣委造，在PC端戳鹅，它顯示為八格，在平板電腦上昏兆，它顯示為每行四格枫虏，在手機端，它顯示為每行兩格，也就是說隶债，每跳躍一個設備腾它，寬度就增加一倍。需要注意的是死讹，在極限情況下瞒滴，它不會把兩個合并成一個，這也是和stackable有所區(qū)別的地方赞警。
