之前，农场水产网站建设让小编意识到一个问题，即网站的自适应问题。网站建设好之后，发给客户看下有什么问题？客户在看完之后，表示公司帮其制作的网站的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/