由于最近使用了一段时间的Semantic UI,在项目中做一些响应式的页面,所以对Semantic UI的响应式布局开发有一些经验,记录在这里。
semantic翻译到中文的意思是语义的
。这也暗示了Semantic UI的最大特点,它的语法定义都是语义化的,这样有助于我们使用,使得代码更容易看懂。通过一段时间的使用,我认为语义化的网页代码确实给开发带来了一定的优势。所以,如果选择一套顺手的前端UI框架的话,我认为Semantic UI是一个很不错的选择。下面就是一些我使用中的笔记,希望对你有所帮助。
不同屏幕的区分
Semantic UI有两种区分不同屏幕的方法,分别是按照屏幕大小,还有设备类型来区分。
-
computer
tablet
mobile
-
large screen
widescreen
这几个变量的用法还是很灵活的,例如,如果你的某个元素只在手机上显示的话,你可以使用:
<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
有所区别的地方。