使用 vw 做响应式， PC 端怎么适配？

[kid1412621]

大漠那个用 portcss 插件 px 转 vw，但都是以手机端为例，设计稿宽度都以 750 px 算的，那我写桌面端呢？

[WittBulter]

要单独写媒体查询去改样式，因为 PC 的排版会有差别，比如菜单在移动端是下拉动画，但在 PC 多数是侧边栏。
可以试试这几个方法：


1. 用全局的类名覆盖，比如 `md / lg` 之类的类名加在顶级，然后通过 `.lg > xx` 去写不同的样式。
2. 写成 scss / stylus 函数用在组件。
3. 用 `matchMedia` 之类的 JS 接口封装一个指令 / 服务 / 插件，用在组件上体现不同的排版，每个组件负责适配自己就行。

然后你用的 px2rem vw 这种，可以在屏幕超过范围或者在 PC 中，缩放设定为固定的数值，比如 1，再去逐个兼容 PC。

[kid1412621]

@WittBulter 说具体些吧， 我用的 vue，同一个组件，在 pc 上和 mobile 上的长宽比不一样，字体大小也不一样，意思我要写两套？

[wu67]

还不如写两套. 那啥, 妄图统一全端的都....

[J2s]

会被自己坑的酸爽，不谈改版时候的苦逼，冗余代码导致的卡顿，就是保存两端的统一性，都要付出不止两倍的时间

[kid1412621]

@J2s 嗯，有感受，只是现在很前期，想写一套暂时搞定，但发现都写不出效果来

[dingxi]

响应式 还是说的自适应？

[dingxi]

响应式是通过排版改变，多端展示
你说的那种可能是自适应，而且是以 iPhone6 为原型设计的，我建议吧 如果是 大于 一个尺寸访问，你的最外部的容器 就设置 为 750px 其他的 margin : 0 auto;
参考下 那些大站的 PC 移动： https://m.weibo.cn/?jumpfrom=weibocom

[kid1412621]

@dingxi 谢老哥，你说的自适应的方案在两端布局不一样的时候一个就要写两套吧？
那响应式是不是只能用譬如 bootstrap 那种方案？