通常设计师在设计PC端网页时会将页面主要的信息内容置于页面中间的1200px范围内，这1200px也就是俗称的版心了。这是网页设计的规则之一，目的是帮助前端制作PC端的页面自适应。目前市面上主流的屏幕分辨率是1920*1080，此外还有1440*900以及1680*1050等等。而设计师一般给出的设计图都是1920*1080版的。
如果完全将网页完全按设计图还原，不做自适应，遇到小屏时就会出现网页显示不全需要用户移动页面底端滑条才能看到完整网页内容的情况。这会让用户体验极差。百度所用的方法是让内容靠右，已达到最大限度的展示所有内容。但对于其他以内容展示为目标的网站，让用户一直扭着脖子观看实在不妥。
所以我们还是老老实实居中吧。
说起来也是很简单，写页面时可以将先建立一个宽度自动跟浏览器宽度一致即width：100%的盒子。然后再在这个盒子中放入一个固定宽度1200px的盒子，将其居中position：relation；margin:0 auto;在将内容写在这个1200px的盒子中即可。
这时候就有人要问很多时候设计师会在超过版心的地方设计有装饰插画，且大部分背景图片也超过1200px又该怎么办。这时候就要用到外面那个宽度100%的大盒子了。我们可以把背景图片非平铺居中置于大盒子中。这里还要注意记得给大盒子写入最小宽度为1200px,以保证不会因为浏览器被调节宽度过小而导致背景图型变。而小面积超出版心的装饰插画放置是也应该基于版心利用相对位置放置，已达到最大程度的适应浏览器大小去展示页面最主要内容。
最后这两端代码编译后就能很直观的展示这篇文章所说的事情
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无自适应居中</title>
</head>
<style type="text/css">
.content{
width: 1920px;
height: 600px;
background: #adf;
}
.cont{
width: 1200px;
height: 600px;
position: absolute;
left: 360px;
background: #FD3800;
}
</style>
<body>
<div class="content">
<div class="cont">
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>有自适应居中</title>
</head>
<style type="text/css">
.content{
width: 100%;
min-width: 1200px;
height: 600px;
background: #adf;
}
.cont{
width: 1200px;
height: 600px;
margin: 0 auto;
background: #FD3800;
}
</style>
<body>
<div class="content">
<div class="cont">
</div>
</div>
</body>
</html>
网友评论