首先要在头部，即<head></head>标签内写自适应代码，如下：
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
其次，网页内部的元素宽度要使用百分比，在不同的屏幕大小下需使用媒体查询定义不同的css代码，例如：
@media screen and (max-width:640px){
element{ color:#ff0000} //屏幕宽度小于640px时显示红色字体
}
@media screen and (max-width:480px){
element{ color:#0000ff} //屏幕宽度小于480px时显示蓝色字体
}
css默认下有一个高度，然后根据内容的填充需要自动适应内容的css写法：
div{ min-height:400pxheight:auto}
设置最小高度，也就是固定的高度。
设置高度自适应。
以此类推也可以定义最大高度，高度自适应，当内容填充超过一定程度高度将不再增加。
这个方法就大致分为两种吧，第一种，用CSS的方法
第二种，用JS方法
这里暂时只演示第一种，如果第二种，另外@我
示例代码如下：
CSS代码第一种写法
html,body{height:100%margin:0}/**把HTML和BODY的高度设置成100%**/
div{height:100%background-color:#ccc}/**把你DIV的高度设置成100%**/
CSS代码第二种写法
div{height:100%position:absolutewidth:100%background-color:#cccleft:0top:0}
这里用到position:absolute 所以HTML和BODY不需要设置100%
