Semantic UI响应式开发小结

2024年1月6日 499次阅读 来源: 瑾逸te

由于最近使用了一段时间的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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞