# 屏幕适配方式

入口：参数设置区>>>外观>>>屏幕适配方式

<figure><img src="/files/3vT4N0K3TKxrfabqN5l8" alt=""><figcaption></figcaption></figure>

👉**推荐阅读:** [制作技巧-适配相关](/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-zhi-zuo-ji-qiao-zhong-xin/tong-yong-zhi-zuo-ji-qiao/zhi-zuo-ji-qiao-shi-pei-xiang-guan.md)  [适配问题](/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-faq/shi-pei-wen-ti.md) &#x20;

## <mark style="color:blue;">**1.适配规则: 图层的XY坐标距离原点的计算**</mark>

如下图，坐标原点(0,0)位于画布的左上角

画布中每个图层的坐标，是以图层的左上角为基准计算的。例如：手指图层的x、y坐标是(100,100），指的是手指图层左上角到原点的距离是（100,100）

<figure><img src="/files/ztUD1zMNXrtomiOeNt3z" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">**2.默认适配方案**</mark>

**图层以画布中心点为基准，相对画布的中心点坐标不变。**

各资产/图层在被添加到项目中时，其图层的屏幕适配方式都默认“水平居中&垂直居中”，即无论在多大的屏幕上预览，该资产都会出现在画面中央。

💡也就是说，<mark style="color:red;">默认我们是不需要调整图层的屏幕适配方式的，这样在画布中编辑的排版/位置是怎样的，在不同机型下预览就是怎样的，会自动等比适配；</mark>偶尔会需要对部分图层的屏幕适配方式进行调整，以在不同机型下获得最佳的视觉效果，如将产品信息设为"居中贴底"

建议阅读：  [/pages/CYcfFqHNF4f0OXUybMas#id-2.-ping-mu-shi-pei-fang-shi-jian-yi](https://doc.playturbo.cn/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-shi-yong-zhi-nan/bian-ji-ye-mian-fen-qu-jie-shao/can-shu-she-zhi-qu/pages/CYcfFqHNF4f0OXUybMas#id-2.-ping-mu-shi-pei-fang-shi-jian-yi "mention")

<figure><img src="/files/Fpld6WbO8FWPXBEQVB9G" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">**3.不同的适配方式展示**</mark>

**若调整四边适配，则图层将以画布的四条边为基准，不同屏幕相对的边缘距离不变。**

例如，当图层选择左边和顶部(即左上角)适配时，在750\*1334的画布上，图层左上角相对画布左上角的原点是（100,100），那么换成其他尺寸的屏幕时，图层相对画布左上角的原点仍然是（100,100）

<table><thead><tr><th width="72" align="center">序号</th><th width="134" align="center">适配方案</th><th align="center">屏幕适配按钮</th><th align="center">iPhone6【750*1334（默认）】</th><th align="center">iPhone X【828*1972】</th><th align="center">ipad【768*1024】</th></tr></thead><tbody><tr><td align="center">1</td><td align="center">居中适配<br>默认适配方案</td><td align="center"><img src="/files/3HzJ9ONh8pGwIBAGAnIe" alt=""></td><td align="center"><img src="/files/ipLQKyKp1JCaDEGbhujn" alt=""></td><td align="center"><img src="/files/PcCmjGF8LAU3hHQCQkm7" alt=""></td><td align="center"><img src="/files/95pOBFWN9HoB4rLP3WWo" alt=""></td></tr><tr><td align="center">2</td><td align="center">顶部适配</td><td align="center"><img src="/files/aWsQpVnw7TO2kV7Gt8zb" alt=""></td><td align="center"><img src="/files/rG6rGDpHgLRA665Iym7A" alt=""></td><td align="center"><img src="/files/0e7LJzIKpYtkfBk2RhTG" alt=""></td><td align="center"><img src="/files/qFRWQWOSYRAphrG2m8Lk" alt=""></td></tr><tr><td align="center">3</td><td align="center">底部适配</td><td align="center"><img src="/files/hpfz822iTnXEUqOBd877" alt=""></td><td align="center"><img src="/files/Xc2a738UaTfRWKhUKMNP" alt=""></td><td align="center"><img src="/files/Bk3s8vrOCd9Vgaue1k73" alt=""></td><td align="center"><img src="/files/tpVUqxtVfP9uPYmISrHo" alt=""></td></tr><tr><td align="center">4</td><td align="center">居左适配</td><td align="center"><img src="/files/ihAmcNQKvY4hQQsODqKr" alt=""></td><td align="center"><img src="/files/4xmI7kbJumnYdi9IXfdE" alt=""></td><td align="center"><img src="/files/XBoyfO9LD9nPp3OaVnmt" alt=""></td><td align="center"><img src="/files/smDfuXzID06uivTNekzx" alt=""></td></tr><tr><td align="center">5</td><td align="center">居右适配</td><td align="center"><img src="/files/iaVaZNPiV4hJKI6QjM96" alt=""></td><td align="center"><img src="/files/tN9l9r6zwpY9AkfNk5Vk" alt=""></td><td align="center"><img src="/files/IyruOedFQ1dISuEswVs5" alt=""></td><td align="center"><img src="/files/GeAF7FjEYtKHfuGM8bTo" alt=""></td></tr><tr><td align="center">6</td><td align="center">左上角适配</td><td align="center"><img src="/files/O0RuqzMQHXChIXwKSi0I" alt=""></td><td align="center"><img src="/files/QFX5gb1GanSPqYs8mfrK" alt=""></td><td align="center"><img src="/files/9rCvl03bPRMkf27qEXA7" alt=""></td><td align="center"><img src="/files/DANq6Rb19ylmBokSax58" alt=""></td></tr><tr><td align="center">7</td><td align="center">右上角适配</td><td align="center"><img src="/files/X9I8BlQcBP2KnuDOyGPT" alt=""></td><td align="center"><img src="/files/Sj487GKRHhgZJXTUosj1" alt=""></td><td align="center"><img src="/files/rb6cShsAhyoanZiNON7O" alt=""></td><td align="center"><img src="/files/41LS2klwA4Y8TTdIU9N6" alt=""></td></tr><tr><td align="center">8</td><td align="center">左下角适配</td><td align="center"><img src="/files/YzswbCzrAfVvrna2K8IS" alt=""></td><td align="center"><img src="/files/34TrJ97w7zObxXiC2Bkq" alt=""></td><td align="center"><img src="/files/X1RMB2WOYvr9sLWVk1g7" alt=""></td><td align="center"><img src="/files/kSvT8w2KqBAFUhdhQvxH" alt=""></td></tr><tr><td align="center">9</td><td align="center">右下角适配</td><td align="center"><img src="/files/yNHdomeOkVlfgIiNyoVg" alt=""></td><td align="center"><img src="/files/yx971FD6D3znAzDa2VQ0" alt=""></td><td align="center"><img src="/files/0tWDTm82Q86ouKNdgbhu" alt=""></td><td align="center"><img src="/files/05KAX2kHs0rvnlEaj0Rx" alt=""></td></tr></tbody></table>

## <mark style="color:blue;">4.调整适配的建议</mark>

💡因素材各不相同，您可根据实际需要对图层的屏幕适配方式进行适当调整。<mark style="color:red;">需注意，屏幕适配方式默认拆分横竖屏单独设置，您需要分别调整横屏和竖屏；若某些图层 横竖屏的适配方式相同，则可以取消勾选</mark>

<div align="left"><figure><img src="/files/Xd8gKASByUl0WyPlrXL5" alt=""><figcaption></figcaption></figure></div>

💡当设置完屏幕适配方式，建议您及时预览，并且**切换不同设备&横竖屏**来确认最终效果！


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.playturbo.cn/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-shi-yong-zhi-nan/bian-ji-ye-mian-fen-qu-jie-shao/can-shu-she-zhi-qu/ping-mu-shi-pei-fang-shi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.