快捷導(dǎo)航

Element UI響應(yīng)式布局問題的解決

更新時間：2025年08月21日 10:47:31 作者：Huanlis

本文主要介紹了Element UI響應(yīng)式布局問題的解決,提供了五種屏幕大小尺寸,xs、sm、md、lg 和 xl,并對這五種尺寸提供了兩種解決方案,感興趣的可以了解一下

一、對于屏幕尺寸的定義

element UI參照Bootstrap的解決方案提供了五種屏幕大小尺寸：xs、sm、md、lg 和 xl。并對這五種尺寸提供了兩種解決方案。

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

二、Element UI提供的兩種解決方案

（一）在標(biāo)簽中指定元素所占大小

這種方式通常需要結(jié)合<el-row></el-row>標(biāo)簽使用。在列元素中指定不同尺寸下元素所占的大小，例如:xs="4"表示在手機上將一行分為24欄本元素占4欄。這種方法簡化了CSS關(guān)于響應(yīng)式布局代碼的編寫，但是需要配合<el-row></el-row>標(biāo)簽使用，不是很靈活。

<el-row :gutter="10">
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

:xs="4"表示在手機上將一行分為24欄本元素占4欄。這種方法簡化了Css關(guān)于響應(yīng)式布局代碼的編寫，但是需要配合<el-row></el-row>標(biāo)簽使用，不是很靈活。

（二）使用樣式類指定元素是否顯示

這種方法需要導(dǎo)入element-ui/lib/theme-chalk/display.css樣式就可以實現(xiàn)在不同屏幕尺寸下，元素是否顯示。這種方法的好處是不需要配合<el-row></el-row>標(biāo)簽就可以使用，使用起來比較靈活。但是這種只能簡單的對元素進行隱藏，如果需要實現(xiàn)稍微復(fù)雜點的響應(yīng)式樣式就要思考很多。使用這種方法首先需要導(dǎo)入樣式：import 'element-ui/lib/theme-chalk/display.css';。然后在目標(biāo)元素上添加類名就行。例如：

<el-divider class="hidden-sm-and-up"></el-divider>

這表示<el-divider></el-divider>元素在手機網(wǎng)頁中顯示，在平板及比平板屏幕大的設(shè)備上隱藏。下面是Element UI官網(wǎng)提供的一些用于隱藏元素的類名。

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

三、不該被忘記的CSS語法

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

@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;
    }
}

到此這篇關(guān)于Element UI響應(yīng)式布局問題的解決的文章就介紹到這了,更多相關(guān)Element UI響應(yīng)式布局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: