连云港华舜的客户网站建设改为自适应
发布于:2015-03-27 10:18  浏览:

之前,农场水产网站建设让小编意识到一个问题,即网站的自适应问题。网站建设好之后,发给客户看下有什么问题?客户在看完之后,表示公司帮其制作的网站的qq漂浮框,已经被挤到了网站的版块文字上了,起初小编以为是客户用的是老式的电脑,屏幕小。后来,客户表示自己用的是笔记本电脑,经过试验过后才发现是网站没有做自适应。如何解决呢?

自适应网页设计,既可以自动识别屏幕宽度,做出相应调整的网页设计。首先,在网页代码的首部,加入一行viewport元标签。<metaname="viewport"content="width=device-width,initial-scale=1"/>viewport是网页默认的宽度和高度,网页宽度和屏幕宽度等大小,原始缩放比例(initial-scale=1)为1.0,网页初始大小和屏幕面积相等。

首先,说下网站高度的自适应,我已经设置div 100%了,怎么还没效果,我想说的是,有一个关键的问题,你没设置。代码如下:html,body{height:100%;overflow:hidden;};

网页需要根据屏幕大小调整布局,建议不使用绝对宽度的布局,也不能使用绝对宽度的元素。例如:css不能指定像素宽度:width:px;只能指定百分比宽度:width:xx%;或者width:auto;流动布局(fluidgrid)各个区块的位置不能固定不动,是会浮动的;字体大小设置不能用绝对大小,只能使用相对大小(em),在HTML页面上不要使用绝对字体(px),而要使用相对字体(em),对于大多数浏览器来说,通常用 em = px/16 换算,例如16px就等于1em;图片的自适应:img标签的话,只需要设置 max-width: 100%;或width:100%; 语句为:img { max-width: 98%; },css加载的background-image如何自适应大小呢,其实CSS3中是可以实现的,添加如下语句:background-size:100% 100%;屏幕宽度低于480像素的设备(如iPhone等),网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog,WordPress相关标签名称只需修改一下即可。

@media screen and (max-device-width: 480px) {

   #divMain{

   float: none;

  width:auto;

  }

  #divSidebar {

   display:none;

  }

 }

以上的内容,公司将会在以后的连云港网站建设的单子中,进行应用。

http://www.web0518.com/