PC端适应不同分辨率的问题

Question

设计师给了个1920X1080的设计稿需要适配不同的分辨率的屏幕没做过这种适配的不知道怎么弄的网上查了下说是用缩放transform跟zoom但是没看到简单点的实例代码基本上是说了一下思路这个要怎样兼容不同的浏览器还有就是里面元素宽度试试是用百分比吗还是怎么弄呢还有内容居中的问题我这还是个vue单页应用，就这一个页面需要适配不同屏幕

Answer 1

一般的做法是定义一个中间宽度，1200px或者1000px，具体的值要根据你的设计稿来定。这个中间宽度里的尺寸直接根据设计稿的尺寸1:1来就行了，两边宽度自适应，中间宽度居中，就好了。

Answer 2

响应式布局了解一下，很多css框架都提供了响应式布局功能（栅格系统）。当然了你也可以自己实现，主要是用的媒体查询，在不同分辨率下，采用不同的css样式。body{background:red;}@mediascreenand(max-width:300px){body{background-color:lightblue;}}如果文档宽度小于等于300背景颜色为淡蓝色，如果文档宽度大于300，背景样式为红色。