PC端多屏适配,PC兼响应式H5项目实现方案?
我们一般开发 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 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容