关于web页面适配

chess99
  • 704

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

了解到以下几种方式:

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

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

回复
阅读 4.1k
4 个回答
小哈
  • 214

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

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

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

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


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

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

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

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

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

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

宣传栏