所在位置：
首页 >
营销资讯 >
网站运营 > 前端开发中，在做pc端的全屏页面时，怎样进行适配呢？
前端开发中，在做pc端的全屏页面时，怎样进行适配呢？
时间：2024-02-08 09:20:01 | 来源：网站运营
时间：2024-02-08 09:20:01 来源：网站运营
前端开发中，在做pc端的全屏页面时，怎样进行适配呢？：写过几个投屏的项目，简单分享一下思路，目前解决这类全屏适配问题（据我所知）没有很完美的方法，难点在于全屏的宽高比不确定，得从设计上去避坑。
以下方案都是基于rem响应式的前提：
方案一：固定比例并保证能够完整展示也就是以设计稿的比例为准，以整体缩小或者放大的形式将设计稿还原到页面的中心区域，内容能够完整展示。
优点是在于适配简单，不需要过多地细节调整和转换，而且维护很方便。
缺点是大部分情况下页面会有留白区域，除非显示屏的比例刚刚好与设计稿一致。
方案二：同比例拉伸宽高我们简单地将模块的长度单位由rem换算为百分比就可以实现，或者，大部分情况下我们会采用flex布局，可以简化很多操作而且便于理解维护。
优点是内容可以完全展示并且页面没有多余的留白，显得很“充实”，给人一种“为我量身定制”的感觉。
缺点是换算稍嫌麻烦，需要频繁与设计师沟通；因为尺寸不确定，所以显示效果也没办法保证，比如横屏的设计被用户投在竖屏上，效果一般不会好。还有一个问题就是维护麻烦，设计上增减一个模块都有可能打破原有的平衡，使得某个尺寸的屏幕本来能够良好展示，改完就变糟糕了。
方案三：媒介查询实现动态布局用过bootstrap应该都知道它的栅格布局，可以实现在不同的分辨率下动态切换布局以适应当前。
优点是很大程度上减少了方案二的不确定性，把原本无数的屏幕尺寸简化为可预见的若干种尺寸边界。
缺点是工作量大，单单设计稿，我们就需要不同尺寸各出一套，然后开发各一套，至于维护，对设计师对开发者那都是体力活了。
这几个方案里，要是能用方案一就用方案一，实在不行就方案二，不推荐方案三，我自己也没有实现过。所以方案三最好别跟产品经理提起，没有技术背景的产品经理是不会懂什么是“可维护性”。
在线咨询
