自适应网页设计

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

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

<meta name="viewport" content="width=device-width, initial-scale=1" />

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

<!--[if lt IE 9]>
　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
　　<![endif]-->

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

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。指定百分比宽度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值
比如：

<div class="outerdiv">
     <div class="innterdiv">
     </div>
</div>
   
   
.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浏览器不支持该写法。

参考自：
自适应网页设计（Responsive Web Design）
基于vw等viewport视区相对单位的响应式排版和布局