H5 页面折叠屏适配的问题，请教大佬！

[minuo0day]

h5 的活动页面，大体是 loading 页进来之后选择头像模版生成海报进行分享这么一个项目； 前端依然是用 vue 写的 Loading 和首页这样子，media query 啊，REM 布局、js 啊等等这些都用了，用来适配各种机型，常规手机打开完美，折叠屏像三星 z 这样上下翻的也没问题，唯独像荣耀 Magic Vs 折叠屏手机这样的，loading 页打开后排版就会被各种放大导致样式错乱，是不是前端需要适配移动端和平板两种设计呢？特此请教适配问题，希望指正

[zcf0508]

wip

https://github.com/zcf0508/vue-split-screen

[minuo0day]

@zcf0508 感谢大神，方便进一步和您沟通么

[zcf0508]

@minuo0day 暂时还不能用，还需要很长的开发

[learnshare]

响应式要适应各种不同的场景，折叠屏没什么特别的

[minuo0day]

@learnshare 但折叠屏比例近乎 1:1 ，甲方要求很高

[learnshare]

@minuo0day 屏幕尺寸、宽高比（屏幕方向）也都是响应式要覆盖的不同角度而已

[han3sui]

这种应该类似 h5 在 pad 上打开，宽度超过了一定值，字体大小就固定一个值了，不能无限放大。

如果视觉效果要求很高的话，设计稿要设计一版效果吧

[AuYuHui]

postcss-mobile-forever

试试这个库

[cssTheGreatest]

折不折叠屏幕无所谓，应该关注你的设计 /样式代码在不同宽高比例的屏幕中的适配。
叫上设计师，在浏览器模拟器里拉几个非常规的长宽比看看吧

[wsWmsw]

从可访问性的角度，是要让布局适配各种屏幕的。不过看你用了媒体查询，按道理展开的折叠屏应该会匹配到更宽的媒体查询吧。

postcss-mobile-forever 这个是 vw 布局，能限制最大宽度，可以试试。
https://github.com/wswmsword/postcss-mobile-forever

[minuo0day]

@wsWmsw
@AuYuHui
亲测有效