这是UI给的设计图，请怎么做出不管在电脑上的什么尺寸都能展示相应的比例是怎么实现呢？

Question

这是UI给的设计图，请怎么做出不管在电脑上的什么尺寸（14寸、15.6寸、21寸、23寸等等）都能展示相应的比例是怎么实现呢？是不是很难实现？里面是背景色来的，不是一整张图片，只给部分的图片

Answer 1

首先，你作为一个职业前端，在描述屏幕尺寸时居然描述的是显示器的物理大小而不是屏幕的像素点，这让我很费解。然后，我猜你要的效果是要页面在不同尺寸下都呈现合适的效果，而不是你所描述的按比例呈现。所以，你还是先搞清楚自己的具体需求，然后再去找答案，会简单得多。前面有人提到了响应式，其实不需要，以我对一般14寸电脑的理解，其分辨率足以容下你页面的主题，你这个只需要做几个全屏容器，背景定义在容器里，然后把主体居中在容器中就可以了。难点在怎么让全屏容器居中，其实这个也简单，不过你得预估一下你的容器的最大宽度。（当然也可以不居中容器，而居中其背景，用background-position:center center和background-size :cover或background-size :contain即可。）