关于PC端网页版心及网页自适应问题

通常设计师在设计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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,343评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,810评论 0 2
  • 课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握C...
    繁华退却阅读 1,764评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,816评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,811评论 1 45