> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 设置元素尺寸：宽度、高度与最大宽度

> 在 Dimensions 设置中调整元素的宽度和高度，按需选择 px、% 或 Fit 单位，并设置最小和最大宽高，让布局在各种屏幕上保持整洁。

Dimensions 区域让你控制**画布上任何元素的尺寸**，用来管理布局、间距和响应式表现。

选中任意元素后，在**右侧面板**中就能找到这些设置。

## 在哪里找

1. 在画布上点击任意元素
2. 转到**右侧面板**
3. 展开 **Dimensions** 区域

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/OxODOtVy1KOg0VAr/images/sizes.png?fit=max&auto=format&n=OxODOtVy1KOg0VAr&q=85&s=705a6a256803b04df8c147505c50015e" alt="右侧面板中的 Dimensions 尺寸设置" width="1306" height="988" data-path="images/sizes.png" />
</Frame>

## 尺寸控件

### Width

控制元素的宽度。

### Height

控制元素的高度。

## 单位说明

设置宽高时，可以选择不同单位：

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/OxODOtVy1KOg0VAr/images/image-7.png?fit=max&auto=format&n=OxODOtVy1KOg0VAr&q=85&s=f31fcf19b3ae1fd9797b6520f523bfd1" alt="宽高字段的单位选择器" width="292" height="319" data-path="images/image-7.png" />
</Frame>

### px（像素）

* 固定尺寸
* 不随屏幕变化
* 适合需要精确控制的场景

### %（百分比）

* 相对于父容器
* 响应式、灵活
* 适合需要适配屏幕尺寸的布局

### Fit

* 根据内容自动调整
* 元素随内部内容变大或变小

## 高级选项

点击 **More Options** 可以打开：

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/OxODOtVy1KOg0VAr/images/image-8.png?fit=max&auto=format&n=OxODOtVy1KOg0VAr&q=85&s=979d94a0d85cf73a9ce230c967d4403e" alt="展开后的最小和最大宽高设置" width="285" height="364" data-path="images/image-8.png" />
</Frame>

### Min Width / Min Height

* 设置元素可以缩到的最小尺寸

### Max Width / Max Height

* 设置元素可以扩到的最大尺寸

## 示例

* Width 为 `100%`
* Max Width 为 `600px`

👉 元素在小屏幕上会拉伸，在大屏幕上则不超过 600px。

## 最佳实践

* 响应式布局用 **%**
* 需要精确控制时用 **px**
* 希望内容决定尺寸时用 **Fit**
* 设置 **max width**，让布局在大屏幕上也保持整洁


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.