简单说一下，他外层如果有position:relative或者position:absolute元素。
则他的top，left，right,bottom值以外层元素为参照对象。否则以文档为参照对象
楼主的问题应该是设定了right或bottom，但外层没有position:relative或者position:absolute
所以元素参照文档（你可以理解为窗口），所以窗口变化元素位置就都变了
你要在外层加一个元素，扩上你body以内的所有标签，然后给它设定position:relative然后参照这个元素调整一下里面的布局。就不会有文档缩放，元素变位的问题了
可以给背景图片加个尺寸限定：background-size: 100% 100%/* 背景图片同窗口完全自适应，但长宽可能会变形 */background-size: contain/* 背景图片同窗口完全自适应，并且不变形 */根据现实中的分辨率大小来设置css来控制。
@media screen and (min-width: 200px) {
body {
font-size: 10px
}
}
@media screen and (min-width: 1000px) {
body {
font-size: 50px
}
}
扩展资料：
CSS3 @media 查询：
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
CSS 语法：
@media mediatype and|not|only (media feature) {
CSS-Code
}
媒体类型：
all：用于所有设备
print：用于打印机和打印预览
screen：用于电脑屏幕，平板电脑，智能手机等。
speech：应用于屏幕阅读器等发声设备
