关于web页面适配

Question

如何保证在不同分辨率的屏幕下还原设计稿
(PC端的类似后台管理的项目)

了解到以下几种方式:

• viewport强制缩放 (可能会造成显示模糊)
• @media (响应式,似乎不能保证还原设计稿)
• rem (现在的主流?)

想知道一下大家实际实践中是如何处理的

Answer 1

从题主的问题分析，不难发现问题的核心是 “100%还原设计稿的最佳方案选择。”
那么这里问题来了。在题主给的几个方案里，是否真正还原设计稿的方案？设计稿还原的是什么？
我们知道设计稿的宽，高。都是固定的，如果只是单独还原宽或者单独还原高，那么会造成拉伸，那么在不同分辨率。我们还原的是他的宽高比例吗？
很多年前我试过。我发现还原宽高比例不一定会好看，为什么？
打个比方。你1360的分辨率字是14px, 1920的分辨率是1360的1.5倍。那你的字要设置成21px么？？答案是否定的。因为用大屏的用户她所希望的是看到更多的内容。比如一行原先10个字，他用大屏希望的是看到15个字，而非大一号的10个字，除非你的用户全是六七十岁的老人。。

所以针对以上结论，给出答案，还原设计稿不是还原设计稿的宽高比例，而是还原其视觉感受。。。

那么问题又来了，如何还原其视觉感受。。首先你要根据设计稿来区分这究竟是什么布局。再根据布局来区分。，，比如最简单的淘宝网站。上两张图

可以从图中看出，大屏和小屏的区别在于中间的空隙增加了，，
所以还原设计稿并非按照比例还原，而是部分固定，部分自适应。

---

所有答案全部手打，如果题主觉得回答是认真的，请采纳

Answer 2

后台管理的项目就不需要百分百还原设计稿了吧，确定一个原型设计、UI规范或风格，选一个响应式的UI库，加班撸就对了，开发速度才是关键，哈哈哈。

另，假若楼主提到了viewport，可以参考这篇文章，来取代rem；

不是所有的组件都得自己手撸的，仅个人看法。

Answer 3

• 如果网站二点业务量不复杂，可以考虑使用 @media
• 复杂就直接分开成为PC和移动端。
• rem 一般都用于移动端的布局。

Answer 4

PC端想要像移动端那么的较完美的实现自适应还是有难度的，而且不太好弄。