移动端适配显示， 不同尺寸机型全屏适配显示， 图片bg 为底图，为保证在任何设备完整显示，高度设为100%， btn元素定位显示，如何保证btn在任何机型下，位置都能保证统一呢？求大神解答

   <div style="background: #eee" class="box">
        <img class="bg" src="https://mediabook.oss-cn-shanghai.aliyuncs.com/cp.png" alt="">
        <div class="btn" > 1111
        </div>
    </div>
    <style >
    .box {
        height: 100vh;
        position: relative;
    }
    .box .bg {
        height: 100%;
        margin: 0 auto;
    }
    .btn {
        width: 100px;
        height: 100px;
        background: red;
        color: #fff;
        position: absolute;
        left: 100px;
        top: 100px;
    }
    </style>

用vh作为单位，vh，vw是指当前屏幕的百分比，要做通用化的，用百分比的单位比较合适

肯定要百分比控制位置啊，用px肯定不行的，电脑分辨率不同的。用百分比就好了，控制按钮位置。

做移动端的开发可以使用媒体查询，单位是rem，提前设置好rem后，rem单位可以根据窗口的大小来自动适应。
1rem等于html下字体的大小，列如

@media screen and (min-width: 320px) and (max-width: 1024px) {
    html {
        font-size: 42.6px;
    }
    @media screen and (min-width: 360px){
        html{
            font-size: 48px;
        }
    }
    @media screen and (min-width: 375px) {
        html {
            font-size: 50px;
        }
    }
}

这段代码的意思是在像素320px-1024px时，执行下面的css，当像素为320px时，html的字体大小为42.6px，这时1rem=42.6px，当像素为360px时，html下字体大小为48px，这时1rem=48px，根据网易云等一些大型的移动端网页的开发习惯，像素的大小也就是屏幕的宽度是7.5rem；320/7.5=42.6，,360/7.5=48，依照这样的算法，在任何像素的情况下屏幕的宽度都为7.5rem，只要在css中加入html字体大小就好，这样的方法可以适配于所有的移动端浏览器，而且精确到1px。