首先要在头部，即<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时显示蓝色字体
}
你用的是相对屏幕进行进行的绝对定位，比如left:100px在宽窄屏状态下肯定都是距离左边100，宽屏肯定会左移。建议：你可以在这个外面加一个大的div，设置这个div的宽度并居中，这样无论多宽的屏幕该div都随屏幕居中就不会出现一边移的问题了。
做法：外面的div可以写成：
<div style="width:1002pxmargin:0 autoposition:relative">
<div style="position:absolute">里面的定位可以写成这个样子</div>
</div>
希望可以对你有帮助。
