网页美工设计

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

编辑：时间：2017-05-04 21:54:44

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

　　}