本文目錄導讀：

1. 使用媒體查詢
2. 使用百分比單位
3. 使用視窗單位
4. 使用flexbox布局

CSS怎么寫屏幕自適應

隨著移動互聯(lián)網(wǎng)的快速發(fā)展，屏幕自適應技術(shù)越來越受到重視，在網(wǎng)頁設(shè)計中，使用CSS來實現(xiàn)屏幕自適應，可以使得網(wǎng)頁在不同的設(shè)備上都能夠呈現(xiàn)出***佳的效果，CSS怎么寫屏幕自適應呢？

使用媒體查詢

媒體查詢是CSS3中新增的功能，它可以根據(jù)設(shè)備的屏幕寬度、高度、顏色、分辨率等特性來定義不同的樣式，我們可以利用媒體查詢來實現(xiàn)屏幕自適應，當屏幕寬度小于768px時，我們可以將導航欄的樣式修改為橫向排列：

@media (max-width: 768px) {
  .nav {
    display: flex;
    justify-content: flex-start;
  }
}

使用百分比單位

在CSS中，我們可以使用百分比單位來定義元素的寬度、高度等屬性，這樣，元素的大小就可以根據(jù)屏幕的大小來自動調(diào)整了，我們可以將容器的寬度設(shè)置為100%：

.container {
  width: 100%;
}

使用視窗單位

視窗單位（vw和vh）可以根據(jù)視窗的寬度和高度來定義元素的尺寸，與百分比單位類似，使用視窗單位也可以實現(xiàn)屏幕自適應的效果，我們可以將元素的寬度設(shè)置為50vw：

.element {
  width: 50vw;
}

使用flexbox布局

Flexbox布局是一種靈活的布局方式，它可以使得元素在容器中能夠自適應地排列，通過調(diào)整容器的flex屬性，我們可以輕松地實現(xiàn)屏幕自適應的布局效果，我們可以將容器設(shè)置為flex布局，并設(shè)置justify-content和align-items屬性：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

CSS中有很多方式可以實現(xiàn)屏幕自適應，我們可以根據(jù)具體的需求和場景來選擇***適合的方式，也需要注意到，不同的設(shè)備和瀏覽器可能會對CSS的支持程度不同，因此在使用時需要進行充分的測試和優(yōu)化。