pc端ui图片尺寸_聊聊PC端页面适配

目也pc端有适配的需求：目前我们pc项目的设计稿尺寸是宽度1920，高度最小是1080。

适配目标：

1.在不同分辨率的电脑上，网页可以正常显示

2.放大或者缩小屏幕，网页可以正常显示

对于宽度的适配

对于宽度适配：

首先设置html,body{width:100%;overflow-x:hidden;}

然后我们可以把页面分解为背景层(一般宽度都会大于1200px)和内容层(一般宽度都会小于1200px)，对于背景层，我们一般都要求完全铺开，主要有以下几种情况：

1.背景色为纯色：我们可以直接.box{background:#fff；width：100%；}则可以铺满

2.背景设置为背景图片：

我们有情况用.box{background: #fff url(images/01.png) no-repeat center center;width:100%;height:100px;}

有的情况需要用：.box{background: url(images/01.png) repeat left center;width:100%;height:100px;}

对于内容层我们保证我们的内容都封装在盒子内，然后margin:0 auto;保持居中显示，盒子里面的内容，我们再另外调整

对于高度的适配

一般情况下，页面都比较高，我们通过给每个模块设置具体的高度值来做页面，然后页面会出现导航条，我们可以拉动导航条来浏览，但是有的页面的需求是主体内容直接在不同的浏览器上都能完整显示，不通过导航条来浏览

<