隨著移動(dòng)設(shè)備的普及，越來(lái)越多的人開(kāi)始關(guān)注移動(dòng)端上的網(wǎng)頁(yè)顯示效果，在CSS中，我們可以使用媒體查詢（Media Queries）來(lái)定義不同設(shè)備上的樣式規(guī)則，從而實(shí)現(xiàn)移動(dòng)端的顯示效果。

我們可以使用@media規(guī)則來(lái)定義移動(dòng)端的樣式規(guī)則。

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

上面的代碼表示當(dāng)屏幕寬度小于等于600px時(shí)，網(wǎng)頁(yè)的背景色會(huì)變成淺藍(lán)色，這樣，我們就可以在移動(dòng)端上看到不同的樣式效果。

我們還可以使用flexbox布局來(lái)實(shí)現(xiàn)移動(dòng)端的響應(yīng)式設(shè)計(jì)，F(xiàn)lexbox布局可以讓我們更加靈活地控制元素的位置和大小，從而適應(yīng)不同屏幕大小的設(shè)備。

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

上面的代碼表示.container元素會(huì)采用flexbox布局，子元素會(huì)按照列方向排列，并且子元素會(huì)居中顯示，這樣，我們就可以在移動(dòng)端上實(shí)現(xiàn)更加靈活的布局效果。

我們還可以使用CSS的偽類來(lái)實(shí)現(xiàn)移動(dòng)端的交互效果。

.button:active {
  background-color: orange;
}

上面的代碼表示當(dāng)按鈕被按下時(shí)，按鈕的背景色會(huì)變成橙色，這樣，我們就可以在移動(dòng)端上實(shí)現(xiàn)更加豐富的交互效果。

CSS提供了多種方法來(lái)實(shí)現(xiàn)移動(dòng)端的顯示效果，包括媒體查詢、flexbox布局和偽類等，我們可以根據(jù)具體的需求和場(chǎng)景來(lái)選擇合適的方法來(lái)實(shí)現(xiàn)移動(dòng)端的響應(yīng)式設(shè)計(jì)。