自适应网页设计制作的方法和技巧

 　　随着越来越多的人使用手机上网，使自适应网页设计技术变得越来越流行。自适应网页设计指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。当然，对一个新手来说可能听起来有点复杂，其实它比你想象的简单多了（前提你有css基础）。

　　你要做一个自适应网站，首先你要了解什么是自适应布局。自适应布局就是一个网站能兼容适配多个终端，不需要再为每个终端做一个特定的版本。省去了其他终端重新开放的麻烦。一个自适应网站的建设，首先你做的是网页的设计，一个网站是通过多个网页搭建而成的。自适应网页设计你需要做的是：1、允许网页宽度自动调整。2、相对大小的字体。3、不能使用绝对宽度。4、流动布局。

　　响应式网页设计优势：流体网格的网站适合响应式网页设计。

　　1、灵活性强，可以一个网站兼容多个不同终端;

　　2、方便快捷的解决多设备显示适应问题;

　　虽然响应式/自适应网页设计会带来兼容各种设备，但是它也有缺点，工作量大、代码累赘、加载时间长，它们能“一次设计，普遍适用”，可以根据屏幕分辨率自适应以及自动缩放图片、自动调整布局，它们不只是技术的实现，更多的是对于设计的全新思维模式。对于这些缺点，然而后面的技术给响应式问题进行了优化。

　　1、在HTML头部增加viewport标签。在网站HTML文件的开头，增加viewportmeta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。代码如下：

　　这段代码支持Chrome、Firefox、IE9以上的浏览器，但不支持IE8以及低于IE8的浏览器。

　　2、在CSS文件尾部增加针对不同屏幕分辨率的规则。例如使用如下的代码，可以让屏幕宽度低于480像素的设备（如iPhone等），网页侧栏隐藏中部内容栏宽度自动调节。

　　@mediascreenand(max-device-width:480px){

　　#divMain{

　　float:none;

　　width:auto;

　　}

　　#divSidebar{

　　display:none;

　　}

　　}

　　3、布局宽度使用相对宽度。

　　网页总体框架可以使用绝对宽度，但往下的内容框架、侧栏等最好使用相对宽度，这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度，那就需要在@mediascreenand(max-device-width:480px)里面增加各个div的针对小屏幕的宽度，实际上更麻烦。

　　4、页面使用相对字体（非必要）

　　在HTML页面上不要使用绝对字体（px），而要使用相对字体（em），对于大多数浏览器来说，通常用em=px/16换算，例如16px就等于1em。

　　5、图片自适应（非必要）

　　img标签的话，只需要设置max-width:100%;或width:100%;语句为：img{max-width:98%;}

　　css加载的background-image如何自适应大小呢，其实CSS3中是可以实现的，添加如下语句：background-size:100%100%;