在CSS中，我們可以使用sup和sub標(biāo)簽來實現(xiàn)文字的上標(biāo)和下標(biāo)顯示，這兩個標(biāo)簽分別表示“superior”（上標(biāo)）和“subordinate”（下標(biāo)），下面是如何使用它們的示例：

1、上標(biāo)（Superscript）：

<p>化學(xué)式：H<sup>2</sup>O</p>

2、下標(biāo)（Subscript）：

<p>化學(xué)式：H<sub>2</sub>O</p>

在上面的示例中，sup和sub標(biāo)簽分別將“2”標(biāo)記為H₂O化學(xué)式的上標(biāo)和下標(biāo)，這些標(biāo)簽通常用于數(shù)學(xué)、化學(xué)和其他需要標(biāo)記元素或變量的領(lǐng)域中。

樣式設(shè)置

除了默認(rèn)的樣式，您還可以在CSS中設(shè)置sup和sub標(biāo)簽的樣式，您可以設(shè)置字體大小、顏色、背景色等樣式屬性，下面是一個示例：

sup {
    font-size: 0.75em; /* 減小字體大小 */
    color: red; /* 設(shè)置顏色為紅色 */
    background-color: yellow; /* 設(shè)置背景色為黃色 */
}
sub {
    font-size: 0.5em; /* 減小字體大小 */
    color: blue; /* 設(shè)置顏色為藍色 */
    background-color: green; /* 設(shè)置背景色為綠色 */
}

響應(yīng)式設(shè)計

在響應(yīng)式設(shè)計中，您可能需要根據(jù)屏幕大小調(diào)整sup和sub標(biāo)簽的樣式，這可以通過使用媒體查詢（Media Queries）來實現(xiàn)。

@media (max-width: 600px) {
    sup {
        font-size: 0.5em; /* 在小屏幕設(shè)備上減小字體大小 */
    }
    sub {
        font-size: 0.4em; /* 在小屏幕設(shè)備上減小字體大小 */
    }
}

sup標(biāo)簽用于顯示上標(biāo)文字，如化學(xué)式中的元素符號。

sub標(biāo)簽用于顯示下標(biāo)文字，如化學(xué)式中的化學(xué)式。

可以通過CSS設(shè)置sup和sub標(biāo)簽的樣式，包括字體大小、顏色和背景色等。

在響應(yīng)式設(shè)計中，可以使用媒體查詢來調(diào)整sup和sub標(biāo)簽的樣式以適應(yīng)不同屏幕大小。