Semantic UI响应式开发小结

由于最近使用了一段时间的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有所区别的地方。

    原文作者:瑾逸te
    原文地址: https://www.jianshu.com/p/6c9278290648
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞