# Make a responsive panel

This chapter mainly introduces how to construct a universal container prefab so that the prefab can respond to different sizes in different scenarios.

box3

# Create a panel prefab

  1. Create a new Prefab, set the size of the preview prefab container, Open Scene Setting, you can set and preview the assumed parent node size of Prefab.

# Response panel node

The response panel depends on RectTransform, you can refer to the [Two-dimensional node](../gameplay/entities/index.md#Two-dimensional node) chapter for the working logic

# Create response panel node

  1. Create a new panel container node, Set the adaptation method to [StrenchX-StrenchY](../gameplay/entities/index.md#two-dimensional node), which will be adapted according to the size of the parent node. Add a UISprite component to be used as the container background. box1
  2. Create a new sub-adaptation area node, Set the adaptation method to [StrenchX-Bottom](../gameplay/entities/index.md#two-dimensional node), the width will be proportionally adapted according to the parent node, and the bottom distance will be fixed. Add UISprite component to render concrete background. box2
  3. Add the required content (text, picture slices) to complete a simple responsive panel

# The scene uses a responsive panel

  1. Create a new node and set the required size.
  2. Add the responsive panel Prefab to the current node to dynamically respond according to the size of the node.
点击咨询小助手