iphone布局适配解决方案1更新

场景：背景图一张，加活动文本和二维码图片布局；

<style>

 

.cjshCon{height: 100%;background:#ff212a url(images/cj_sh2.png) no-repeat; background-size: 100%;}

    

/* 分享样式 */

.bjdiv{padding-top: 10%; position: relative;}

.shareTip{width: 90%;background-color: rgba(225, 225, 225, 0); border-radius: 0.15rem;position: fixed;top:50%;left:10%;display: none}

.bindqqCon{padding: 0.6rem 0.2rem;}

.shareTip p{padding: 0 0.2rem; line-height: 0.6rem; color: #ffffff; font-size: 0.36rem; letter-spacing: 0.04rem; font-weight: bold; text-align: center;}

.shareTip .bqCon img{width: 1.45rem;}

.btnKnow{background-color: rgba(225, 225, 225, 0); color: #ffffff; font-size: 0.36rem; letter-spacing: 0.04rem;  font-weight: bold; border-radius: 49px; width: 2.92rem; border: 4px solid #ffffff; line-height: 0.9rem; }

.sharePt{padding-top: 66%;}

.clff5a63{color: #ff5a63;}

.promptDiv{margin: 0 18%;color: #534b4d;}

.promptDiv .title{font-size: 0.36rem;margin-bottom: 0.2rem;}

.promptDiv .promptP{font-size: 0.26rem; padding: 0.3rem; line-height: 0.46rem;}

 

.ewmp_div{position: absolute; top: 70%;  left: 50%;    margin-left:-1rem; }

.ewmdiv{  width: 1.8rem; height:  1.8rem; margin: 0 auto; border: 1px solid #ffffff; border-radius: 10px; background-color: #ffffff; overflow: hidden;}

.ewmdiv img{width: 100%; }

.smp{font-size:0.26rem; color: #ffffff; margin-top: 12%;}

</style>

<section class="cjshCon">

         <div class="bjdiv">

            <img src="images/xfbgop.png" alt="" style="width: 100%;">

            <div class="promptDiv" style="position: absolute; top: 42%;">

                <p class=" promptP">

                    <span class="clff5a63">150****5671</span>用户参与<span class="clff5a63">最强大脑调查问卷</span>获得了<span class="clff5a63">Macbook PRO</span>，邀请您一起参与！

                </p>

            </div>

            <div class="ewmp_div">

                <div class="ewmdiv"><img src="images/ewm1.png" alt=""></div>

                <p class="smp">扫码立即参与活动</p>

            </div>

         </div>

    </section>

 

总结：当二维码固定不准确时，可在外层一个div然后放置适当的透明图片站位，宽度100%；

图片大小是自适应随浏览器变化而变化，因此。可解决二维码和文本布局百分比兼容问题。