这是一个创建于 2013 天前的主题，其中的信息可能已经有所发展或是发生改变。
大漠那个用 portcss 插件 px 转 vw，但都是以手机端为例，设计稿宽度都以 750 px 算的，那我写桌面端呢？
 |
1
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。 |
 |
2
kid1412621 OP @WittBulter 说具体些吧， 我用的 vue，同一个组件，在 pc 上和 mobile 上的长宽比不一样，字体大小也不一样，意思我要写两套？
|
 |
3
wu67 2019-05-05 14:01:14 +08:00
还不如写两套. 那啥, 妄图统一全端的都....
|
 |
4
J2s 2019-05-05 14:34:55 +08:00
会被自己坑的酸爽，不谈改版时候的苦逼，冗余代码导致的卡顿，就是保存两端的统一性，都要付出不止两倍的时间
|
|
5
kid1412621 OP @J2s 嗯，有感受，只是现在很前期，想写一套暂时搞定，但发现都写不出效果来
|
 |
6
dingxi 2019-05-06 13:38:36 +08:00
响应式 还是说的自适应？
|
|
7
dingxi 2019-05-06 13:43:54 +08:00  1
响应式是通过排版改变，多端展示
你说的那种可能是自适应，而且是以 iPhone6 为原型设计的，我建议吧 如果是 大于 一个尺寸访问，你的最外部的容器 就设置 为 750px 其他的 margin : 0 auto; 参考下 那些大站的 PC 移动： https://m.weibo.cn/?jumpfrom=weibocom |
|
8
kid1412621 OP @dingxi 谢老哥，你说的自适应的方案在两端布局不一样的时候一个就要写两套吧？
那响应式是不是只能用譬如 bootstrap 那种方案？ |
Select Language