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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2020 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

portcss

大漠

插件

宽度

8 条回复 • 2019-05-06 22:45:43 +08:00

WittBulter

2019-05-05 12:46:34 +08:00

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

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

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

kid1412621

2019-05-05 12:54:20 +08:00

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

wu67

2019-05-05 14:01:14 +08:00

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

J2s

2019-05-05 14:34:55 +08:00

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

kid1412621

2019-05-05 14:40:54 +08:00

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

dingxi

2019-05-06 13:38:36 +08:00

响应式还是说的自适应？

dingxi

2019-05-06 13:43:54 +08:00

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

kid1412621

2019-05-06 22:45:43 +08:00

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