页面的版心html,关于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,以保证不会因为浏览器被调节宽度过小而导致背景图型变。而小面积超出版心的装饰插画放置是也应该基于版心利用相对位置放置，已达到最大程度的适应浏览器大小去展示页面最主要内容。

最后这两端代码编译后就能很直观的展示这篇文章所说的事情

无自适应居中

.content{

width: 1920px;

height: 600px;

background: #adf;

}

.cont{

width: 1200px;

height: 600px;

position: absolute;

left: 360px;

background: #FD3800;

}

有自适应居中

.content{

width: 100%;

min-width: 1200px;

height: 600px;

background: #adf;

}

.cont{

width: 1200px;

height: 600px;

margin: 0 auto;

background: #FD3800;

}

页面的版心html,关于PC端网页版心及网页自适应问题相关推荐

[html] 制作一个页面时，需要兼容PC端和手机端，你是要分别做两个页面还是只做一个页面自适应？为什么？说说你的理由
[html] 制作一个页面时,需要兼容PC端和手机端,你是要分别做两个页面还是只做一个页面自适应?为什么?说说你的理由两个页面 pc端布局和交互行为跟移动端不一样, 两个页面反而更好维护个人简介 ...
PC端品优购网页制作（common.css）
制作网页前的基础学习品优购项目规划 1.1网站制作流程客户沟通制定方案签订合同预付定金不能退初稿审核网页美工会制作原型图和PSD效果图前台页面设计后台工程开发测试验收上线培训后期 ...
前端页面开发浅谈：PC 端设计如何“完美”迁移到移动端？
文章目录前言一.我真的需要一个登录页面吗? 1.1.用户眼中不确定持续使用的系统 1.2.免登陆实现的功能可以满足用户需求二.举个移动端登陆例子三.前端学习不是造火箭四.前端的布局设计五. ...
php代码判断pc端和移动端页面跳转,js判断PC端与移动端跳转
在网上看到很多这样类似的代码,但是有的很复杂,或者有的没有判断完全,上次经理去见完客户回来讲,使用苹果浏览打开pc端(pc已经做了识别跳转)会自动跳转到移动端的网页去,后来经测试才发现 documen ...
PC端品优购网页制作（common.css）2
正式制作网页网站首页一般都是使用index命名,比如index.html或index.php 我们开始制作首页的头部和底部的时候,根据模块化开发,样式要写到common.css里面常用模块类名命名 ...
html+css+js 制作 PC 端酷狗音乐网页
突然翻出来之前用 html+css+js 做的酷狗音乐的网页,纪念一下:只是排了个页面哈,还加了轮播图效果,有点小瑕疵,哈哈,那时候还挺认真的~
PC端中文机械设备企业网页模板
介绍: DIV+CSS灰色机械设备通用展示模板,通用企业模板,都可以使用. 共有7个页面,分别为:首页.图片列表.联系我们.关于我们.产品内容页等等. 网盘下载地址: http://kekewangL ...
vue项目PC端屏幕分辨率与窗口大小自适应
效果 #mermaid-svg-O0n9N0Pq5xuLBK3e .label{font-family:'trebuchet ms', verdana, arial;font-family:var(- ...
vue项目实现pc端和手机端屏幕自适应
1.安装flexible插件 yarn add lib-flexible -S 下载淘宝的flexible插件,-S为产生依赖 2.安装px自动转换成rem的插件 yarn add px2rem-lo ...

页面的版心html,关于PC端网页版心及网页自适应问题

页面的版心html,关于PC端网页版心及网页自适应问题相关推荐

最新文章

热门文章