> For the complete documentation index, see [llms.txt](https://doc.playturbo.cn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](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).

# 屏幕适配方式

外观参数特别说明:屏幕适配方式

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FfT5OkTqiMw1JZyztMnXF%2Fimage.png?alt=media&amp;token=f426c311-80c3-4c4e-8375-029e10cb769f" 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="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FREvVT7fyq2lldc5ReqNg%2F%E8%A7%86%E8%A7%89%E9%97%AE%E9%A2%984.png?alt=media&amp;token=4cdb787a-51cf-46cb-b29a-3800035b0d54" 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="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FAbaDIuiPmXg6zNf5frsx%2F%E8%A7%86%E8%A7%89%E9%97%AE%E9%A2%985.png?alt=media&amp;token=d37dc5bd-a83e-4fd5-96ab-422e41d1f1ca" 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="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F9SOsqVqpiIwvo394FYyX%2Fimage.png?alt=media&amp;token=4fb79490-b186-43da-9ec8-c096296ec483" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FJZ4qTL76eMRONRpeu9Fn%2Fimage.png?alt=media&amp;token=1001088b-aa6d-4a93-9ea1-a738a045c8cb" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FPhyv1yDQXf2RvgfFQUBS%2Fimage.png?alt=media&amp;token=4fa16ba9-ea50-45e4-ac16-2a6e9b059cd3" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F9tHPVt7lzQaGsfBDnFep%2Fimage.png?alt=media&amp;token=eb2811a9-28e8-49b7-beb1-b1dca1698248" alt=""></td></tr><tr><td align="center">2</td><td align="center">顶部适配</td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FiSMxvTlAjEAKtJPIwxR3%2Fimage.png?alt=media&amp;token=5ffb251a-7385-4c2c-8f8a-395513e7ffe5" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FO7cmWT8aF87hctfSw7o7%2Fimage.png?alt=media&amp;token=27e6f904-82af-470d-9ab9-49e1e27c1d3d" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FjCJplttcDJQxexZFwbyo%2Fimage.png?alt=media&amp;token=765baedf-2aa1-45f7-afbf-809c260134d9" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FLZzMS1I2gp4HZJYXH7cN%2Fimage.png?alt=media&amp;token=3c27483e-b156-453a-96bd-e55a2a07d411" alt=""></td></tr><tr><td align="center">3</td><td align="center">底部适配</td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FJxzrWC7dKLvUaFb5lT7B%2Fimage.png?alt=media&amp;token=37231996-ca33-4b44-8cdc-2a21fd3ae393" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FSQpOpkCgRLxu0K5B3aSS%2Fimage.png?alt=media&amp;token=50ca5401-a160-4ce0-8951-c9e3bd825de9" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FMMCKuHgbG8vHPX8cMVfy%2Fimage.png?alt=media&amp;token=c5c5ffc5-ef93-4c8f-b2ad-4e2c24b13d76" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FUk55JbHlWd2URwNCcPVk%2Fimage.png?alt=media&amp;token=d540ceec-43a9-459b-9118-668f9b4f25b3" alt=""></td></tr><tr><td align="center">4</td><td align="center">居左适配</td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FiZhjr9yEirmxOggLpwsK%2Fimage.png?alt=media&amp;token=90d0ac4b-2263-4c51-aa06-a2adc589f867" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FTPwc2mnNTEQgdcyTZtki%2Fimage.png?alt=media&amp;token=5670e1e5-b977-40b5-963f-bb1ebcca3786" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FmX3tcTg7RQtXdDpN6F6x%2Fimage.png?alt=media&amp;token=77f22d8c-be40-48c7-b99c-cdc0b7187f41" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FGGMHjHgG63qeYdAzauyx%2Fimage.png?alt=media&amp;token=6ec4dd6f-271a-464b-bc6e-16be32cb46a1" alt=""></td></tr><tr><td align="center">5</td><td align="center">居右适配</td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FCvjb2jXc5Fei84xle2n8%2Fimage.png?alt=media&amp;token=b2087fb9-a9c8-46d9-9f0e-a3037ebf4bf1" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FnYPpqjNNeEnbdrWQYU5S%2Fimage.png?alt=media&amp;token=49b0ae87-d149-4b8d-9be6-b42e134b432c" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FZgFtjambZZVOryMPejBh%2Fimage.png?alt=media&amp;token=abb3829f-7eff-4c52-8292-9864f19d9bec" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F020Z4lXvzibbRYuqW3d9%2Fimage.png?alt=media&amp;token=9044e6ee-572c-4f52-a85e-934b34ce3357" alt=""></td></tr><tr><td align="center">6</td><td align="center">左上角适配</td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fjknsfb3SMPkeA15WI5Mm%2Fimage.png?alt=media&amp;token=843e901a-6a3f-4c81-b26e-1ef125b2599e" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fi8pRhpdiuvu6hNW9oSYh%2Fimage.png?alt=media&amp;token=3f1196d2-508c-42db-81be-c779bfa629d7" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fi9gjoONHTcrGlbZY93md%2Fimage.png?alt=media&amp;token=6a66cd60-b8bd-4924-aef7-90de82ad8606" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Futbd9HUadm9e5OOS03Jt%2Fimage.png?alt=media&amp;token=99ca82d4-fce8-48b8-a26c-9cd12f920ce6" alt=""></td></tr><tr><td align="center">7</td><td align="center">右上角适配</td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FXta8IYo9Jv2jKvPEfeEA%2Fimage.png?alt=media&amp;token=86ba34c3-6805-454d-9ac3-56eeb68141d3" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FrRzJVx0ViLiwe5cXTvzJ%2Fimage.png?alt=media&amp;token=481c40a0-a7ce-4c5e-9eb9-f2f44941239b" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FFbP9uQfCfKBmAFrzCHc3%2Fimage.png?alt=media&amp;token=8f3884ee-cddf-4b8d-988a-82d4f635e435" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FDTr89G5TXfI7PgeeEjxj%2Fimage.png?alt=media&amp;token=efecf680-f4a0-458e-9540-f6ef3265bc67" alt=""></td></tr><tr><td align="center">8</td><td align="center">左下角适配</td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F93xmNtEDeST1RXWhJ3zL%2Fimage.png?alt=media&amp;token=e65edffe-ff41-4a69-9b27-d3154aa0a2ea" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FbgULigBvIm0QIEhxAIgE%2Fimage.png?alt=media&amp;token=5a16c357-74bb-418e-ba0d-77a9bee60b88" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FvO1M9KOqG8IvyOKTDNav%2Fimage.png?alt=media&amp;token=9dccc023-2b2a-4720-9365-01341eaea810" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FmxqKwsNVlywzCDdeJQYH%2Fimage.png?alt=media&amp;token=9f81c21e-0332-4f5d-9153-19012357ff7c" alt=""></td></tr><tr><td align="center">9</td><td align="center">右下角适配</td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FIMHc6cf23qmFGWjrwbNk%2Fimage.png?alt=media&amp;token=d0fb8478-04c1-4629-84bb-6648a9d2b144" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F8WfMpSejRPeDdh76g9IX%2Fimage.png?alt=media&amp;token=9f6b1330-1857-417d-a002-edcf4bee2423" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FU0inIEmjgkls7W6UlYav%2Fimage.png?alt=media&amp;token=33ac3dc1-e58f-47a7-8588-6a762c6fbf6a" alt=""></td><td align="center"><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FBttL9GVtYUzQdNZYzJpj%2Fimage.png?alt=media&amp;token=b563855f-98a1-426c-83bb-7e497bfd6555" alt=""></td></tr></tbody></table>

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

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

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fhc1wv0owAc0dTaDA3In3%2Fimage.png?alt=media&amp;token=0470ce75-7f1b-45e6-ad06-7e8069090774" alt=""><figcaption></figcaption></figure></div>

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