在CSS中，我們可以使用多種方法來使模塊自適應，以下是一些常見的方法：

1、使用百分比寬度：

通過為模塊設置百分比寬度，可以使其根據(jù)父容器的寬度自動調(diào)整，如果父容器寬度為500px，模塊寬度設置為50%，則模塊寬度將為250px。

```css

.module {

width: 50%;

}

```

2、使用響應式單位：

CSS提供了響應式單位，如em、rem和vw，這些單位可以根據(jù)父容器或視口的大小動態(tài)調(diào)整，使用em單位，模塊寬度將根據(jù)當前元素的字體大小進行調(diào)整。

```css

.module {

width: 2em;

}

```

3、使用媒體查詢：

通過媒體查詢，可以根據(jù)設備的屏幕大小或分辨率調(diào)整模塊的樣式，這允許模塊在不同設備上呈現(xiàn)不同的樣式。

```css

@media (max-width: 600px) {

.module {

width: 100%;

}

}

```

4、使用CSS Grid布局：

CSS Grid布局提供了一種靈活的布局系統(tǒng)，允許模塊根據(jù)容器的大小自動調(diào)整，通過定義行和列，可以輕松地創(chuàng)建響應式布局。

```css

.container {

display: grid;

grid-template-columns: 1fr 1fr;

}

```

5、使用Flexbox布局：

Flexbox布局提供了一種簡單而強大的方式來創(chuàng)建靈活的布局，通過定義flex容器和flex項目，可以輕松地調(diào)整模塊的大小和位置。

```css

.container {

display: flex;

flex-wrap: wrap;

}

.module {

flex: 1 1 200px;

}

```

通過以上方法，可以確保模塊在各種設備和屏幕尺寸上都能自適應，提供***佳的用戶體驗。