如何做好自适应网页的设计

随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？以下仅供参考！

一、允许网页宽度自动调整

首先，在网页代码的头部，加入一行viewport标签。

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用。

二、不使用绝对宽度，不使用绝对大小的字体

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。指定百分比宽度width: xx%或者width:XXem;

使用相对大小的字体em或者rem。一般浏览器的'默认字体大小为16px。“em”是一个相对的大小，其参考物指的是相对于元素父元素的font-size。因此，1em总是等于父元素的字体大小。而rem总是相对于根元素的字体大小进行计算的。

1.设置百分比时的计算

相对于父元素宽度的：[max/min-]width、left、right、padding、margin 等；

相对于父元素高度的：[max/min-]height、top、bottom 等；

相对于继承字号的：font-size 等；

相对于自身字号的：line-height 等；

相对于自身宽高的：border-radius、background-size、transform: translate()、transform-origin、zoom、clip-path 等；

特殊算法的：background-position（方向长度 / 该方向除背景图之外部分总长度 * 100）、filter 系列函数等；

如果自身设置 position: absolute，则相对于离它最近的那个 position 不为 static 的外层元素，如果没有这样的元素，则相对于窗口。

如果 position: fixed，“父元素”指视口。

margin如果没有加后缀是相对于宽，但是加了后缀，比如margin-left，则是相对于高；

2.设置em时的计算

元素自身没有设置字号大小时，则默认使用父元素字号大小。元素自身要是设置了字体大小后，则字体计算公式为：

需要转换的像素值/父元素的font-size=em值

元素的width、height、line-height、margin、padding、border等值转换总是以当前元素的字号大小计算：

需要转换的像素值/元素的font-size=em值

比如：

rdiv {

font-size: 32px;

}

erdiv {

width: 2em; /*64/32=2*/

height: 2em;

line-height: 2em;

padding: 0.5em;

}

当innterdiv设置font-size的大小时

erdiv {

font-size: 0.5em;/*16/32=0.5*/

width: 2em;/*32/16=2*/

height: 2em;

line-height: 2em;

padding: 0.5em;

}

三、使用流动布局

即各个区块的位置都是浮动的，不是固定不变的。当宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

四、选择加载CSS

"自适应网页设计"的核心，就是CSS3引入的Media Query模块。设置断点时，最好以内容为基础设置，而不是以各种屏幕尺寸来设置。

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 780px) {}

五、图片的自适应

使图片的宽度为100%,但是不超过最大宽度400px;

img {

width: 100%;

max-width:400px;

}

大多数嵌入网页的视频也可这样写：img, object { max-width: 100%;}

六、font-size实现自适应

使用calc实现字体的自适应。比如要让屏幕宽度在 1553px-1032px 的范围内变化时，font-size大小是在12px-16px之间对应变化，则

font-size: calc(0.75em + 4*(100vw - 1032px) / 521);

vw 相对于视窗的宽度：视窗宽度是100vw。视窗宽度指浏览器内部的可视区域大小，即rWidth/rHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

0.75em可以换成百分比font-size: calc(75% + 4*(100vw - 1032px) / 521);

也可换成px单位font-size: calc(12px + 4*(100vw - 1032px) / 521);但是Safari浏览器不支持该写法。