如何做好自适应网页的设计
随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？以下仅供参考！
一、允许网页宽度自动调整
首先，在网页代码的头部，加入一行viewport标签。
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
二、不使用绝对宽度，不使用绝对大小的字体
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。指定百分比宽度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值
比如：
.outerdiv {
font-size: 32px;
}
.innterdiv {
width: 2em; /*64/32=2*/
height: 2em;
line-height: 2em;
padding: 0.5em;
}
当innterdiv设置font-size的大小时
.innterdiv {
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。视窗宽度指浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
0.75em可以换成百分比font-size: calc(75% + 4*(100vw - 1032px) / 521);
也可换成px单位font-size: calc(12px + 4*(100vw - 1032px) / 521);但是Safari浏览器不支持该写法。
【如何做好自适应网页的设计】相关文章：
什么是自适应网页设计09-28
网页设计：自适应网页所有屏幕宽度解析10-04
自适应设计与响应式网页设计的区别09-28
如何设计网页09-21
关于如何做好网页设计的十个小窍门09-27
网页设计中的文字如何设计09-29
网页设计中如何设计按钮11-15
网页设计的色彩如何搭配10-01
如何网页设计分工11-17