PC端多屏适配，PC兼响应式H5项目实现方案？

Question

我们一般开发 H5 项目的话，做适配的方案就是采用 postcss-pxtorem 或者 postcss-px-to-viewport 方案来解决，设计稿一般都是基于 iphone6 标准来设计的； 这个我一般都知道，就是问下 2 个问题：

1. 那开发 pc 端网页项目，一般是采用什么方案来做不同 pc 屏幕大小的? 设计师一般设计 pc 网页都是基于多少 像素 标准来设计的呢？

---

2. 要做个 pc 兼响应式 h5 的项目，一般都是采用什么什么方案做的呢？

我是对开发 pc 网页项目不熟悉，有小伙伴知道的，可以说下嘛。

Answer 1

我现在做的项目就是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的组件，内部做一个兼容处理。