PC端多屏适配，PC兼响应式H5项目实现方案？
站长
· 阅读数 29
我们一般开发 H5 项目的话，做适配的方案就是采用 postcss-pxtorem 或者 postcss-px-to-viewport 方案来解决，设计稿一般都是基于 iphone6 标准来设计的； 这个我一般都知道，就是问下 2 个问题：
- 那开发 pc 端网页项目，一般是采用什么方案来做不同 pc 屏幕大小的? 设计师一般设计 pc 网页都是基于多少 像素 标准来设计的呢？
- 要做个 pc 兼响应式 h5 的项目，一般都是采用什么什么方案做的呢？
我是对开发 pc 网页项目不熟悉，有小伙伴知道的，可以说下嘛。
回复
1个回答
test
2024-06-20
我现在做的项目就是PC+H5两个兼容，采用的大概方案有如下2种供你参考
1.两套样式，html单独开发，js 80~95%复用
PC和H5是两套不一样的UI，UI代码也是两份，但是交互部分80%左右可以复用。比如一个登录界面，pc用element-ui,H5用vant。html部分用两套代码进行实现，js部分就用minix进行混入共用，在不同组件的返回值做一些特殊处理即可。
缺点：逻辑部分混用有非常多的判断处理，后期不太好维护
2.自适应，html、js共用，css做样式变形、控件做封装处理
这个做法对设计师的能力要求较高，对开发者的能力要求也略高，不然代码写出来很臃肿比如采用栅格或者媒体查询进行不同尺寸下的样式变化进行开发，代码都是一套。
如果有下拉控件、日期控件等等，需要自行封装一个自适应PC和H5的组件，内部做一个兼容处理。回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引，对解决问题有帮助
- 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容