横竖屏适配问题？

Question

当前项目 横屏尺寸（1920 1080）,竖屏尺寸（1080 1920 及其他小屏幕尺寸）。考虑到竖屏要适配不同尺寸的屏幕，第一次有使用flexible.js 。竖屏都能进行比较正常的适配，但是横屏的布局会显得比较夸张。目前是有考虑到写两套路由的方案，但是代码量可能会比较大，请问有什么其他好的办法嘛。

Answer 1

看业务类型，一般来说展示型网站，就是通过 @media 写适配，具体是自己手写还是使用 tailwindCSS 这样的原子类或者UI库提供的栅格布局都可以。只需要满足业务即可。 flexible 以及 px2rem 等方案已经都是处于废弃状态了。当然你如果一定要用也不是不行。

由于 viewport 单位得到众多浏览器的兼容，lib-flexible 这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用 viewport 来替代此方。

---

如果说是业务类型的，比如说有大量用户交互的，基本都是独立出来桌面端和移动端两套系统。按照不同的浏览器UA头去做判断跳转到正确的项目。

所以具体情况具体分析，你得把你的项目业务类型说明一下，大家才可以给到你更好更贴合实际的建议。