ElementUI響應式Layout布局xs,sm,md,lg,xl

響應式布局

參照了 Bootstrap 的 響應式設計，預設了五個響應尺寸：xs、sm、md、lg 和 xl。

<el-row :gutter="10">
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"></el-col>
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"></el-col>
</el-row>

基於斷點的隱藏類

Element 額外提供了一系列類名，用於在某些條件下隱藏元素。這些類名可以添加在任何 DOM 元素或自定義組件上。如果需要，請自行引入以下文件：

 import 'element-ui/lib/theme-chalk/display.css'; 

包含的類名及其含義為：

• hidden-xs-only - 當視口在 xs 尺寸時隱藏
• hidden-sm-only - 當視口在 sm 尺寸時隱藏
• hidden-sm-and-down - 當視口在 sm 及以下尺寸時隱藏
• hidden-sm-and-up - 當視口在 sm 及以上尺寸時隱藏
• hidden-md-only - 當視口在 md 尺寸時隱藏
• hidden-md-and-down - 當視口在 md 及以下尺寸時隱藏
• hidden-md-and-up - 當視口在 md 及以上尺寸時隱藏
• hidden-lg-only - 當視口在 lg 尺寸時隱藏
• hidden-lg-and-down - 當視口在 lg 及以下尺寸時隱藏
• hidden-lg-and-up - 當視口在 lg 及以上尺寸時隱藏
• hidden-xl-only - 當視口在 xl 尺寸時隱藏

尺寸解釋

每行總共24個柵格，在不同尺寸的頁面上如何分配寬度比例：

名稱	尺寸	常用設備
xs	<768px	超小屏 如：手機
sm	≥768px	小屏幕 如：平板
md	≥992px	中等屏幕 如：桌面顯示器
lg	≥1200px	大屏幕 如：大桌面顯示器
xl	≥1920px	2k屏等

 

不該被忘記的CSS語法

我們可以使用@media語法來確定屏幕尺寸，並且指定在不同尺寸下的元素樣式。例如，我們指定一個元素在不同屏幕尺寸下的大小：

@media screen and (min-width: 1200px) {
    .container {
        width: 1127px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media screen and (min-width: 922px) and (max-width:1199px) {
    .container {
        width: 933px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media screen and (min-width: 768px) and (max-width:922px) {
    .container {
        width: 723px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media screen and (max-width: 768px) {
    .container {
        width: 100%;
        padding: 0px 10px 0 10px !important;
        box-sizing: border-box;
    }
}