在大概12:3的屏幕上放置网页会出现被拉伸的现象,怎样解决

兄弟,程序员只是程序员而已,百分比布局、rem/vw 单位、媒体查询、响应式设计、flexbox,这些只是工具,它们可以让你工作更轻松,结果更可控。在屏幕宽高比、物理尺寸相差不大的情况下,也许我们可以用上述工具让用户看到的东西能跟设计师基于单一设备的设计稿大致对得上。比如说手机,虽然屏幕大小比例各异,但在竖屏、宽高比接近的范围内,我们可以单靠一个 iPhone 6 设计稿就做手机页面。可偷懒也只能偷到这个程度而已。一旦超过这个范围了,比如竖屏变横屏了,或者到pad 乃至电脑上了,你还是用那一个设计图的话,用户会看到控件太大了,或者东西一屏放不下了,或者两侧有太多留白。其实多屏适配这种事情其实应该是设计优先,设计原则先定下来,长的屏幕怎么摆,宽的屏幕怎么摆,多出几个设计稿,然后程序员才想办法按照这个原则去做。回到问题,这么宽的页面怎么搞?答案是,得问设计师,设计师希望观众在有限的时空内看到什么,关注什么,忽略什么,感受什么,他就去做对应的思考,聚焦和留白都考虑好,动效和交互都设计好,然后程序员照着做就是。至于用什么布局,什么工具,那都是后话。希望对题主有帮助。


    推荐阅读