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

Question

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

Answer 1

你好，请问你这个适怎么适配的？最后解决了吗？

Answer 2

响应式布局了解一下，很多css框架都提供了响应式布局功能（栅格系统）。

当然了你也可以自己实现，主要是用的媒体查询，在不同分辨率下，采用不同的css样式。

body{  
  background:red;
}
@media screen and (max-width: 300px) {  
  body {   
       background-color:lightblue;
    }
}

如果文档宽度小于等于300 背景颜色为淡蓝色，如果文档宽度大于300，背景样式为红色。

Answer 3

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