可以使用CSS的媒体查询来实现自适应布局,以下是修改后的代码:

.mod-title{ height: 6vw; /* 修改为相对单位vw / line-height: 6vw; text-align: center; border-bottom: 1px solid #ddd; background: #fff; } .mod-title .ico-wechat{ display: inline-block; width: 3.3vw; / 修改为相对单位vw / height: 2.88vw; / 修改为相对单位vw / background: url(./wechat-pay.png) 0 -11.5vw no-repeat; / 修改为相对单位vw / vertical-align: middle; margin-right: 1.4vw; / 修改为相对单位vw / } .mod-title .text{ font-size: 4vw; / 修改为相对单位vw / color: #333; font-weight: normal; vertical-align: middle; } .mod-ct .amount { font-size: 9.6vw; / 修改为相对单位vw / margin-top: 2vw; / 修改为相对单位vw / padding-top: 3.6vw; / 修改为相对单位vw / } .mod-ct { padding: 0 13.5vw; / 修改为相对单位vw / margin: 0 auto; margin-top: 1.5vw; / 修改为相对单位vw / background: #fff url(../img/payment/wave.png) top center repeat-x; text-align: center; color: #333; border: 0.1vw solid #e5e5e5; / 修改为相对单位vw / border-top: none; } .mod-ct .qr-image { margin-top: 3vw; / 修改为相对单位vw / } .mod-ct .tip .tip-text { display: inline-block; vertical-align: middle; text-align: left; margin-left: 2.3vw; / 修改为相对单位vw / font-size: 1.6vw; / 修改为相对单位vw / line-height: 2.8vw; / 修改为相对单位vw */ *display: inline; zoom: 1; } .mod-ct .tip .ico-scan { display: inline-block; width: 5.6vw; / 修改为相对单位vw / height: 5.5vw; / 修改为相对单位vw */ background: url(./wechat-pay.png) 0 0 no-repeat; vertical-align: middle; *display: inline; zoom: 1; } .mod-ct .tip .dec-left { background-position: 0 -5.5vw; / 修改为相对单位vw / left: -13.6vw; / 修改为相对单位vw / } .mod-ct .tip { margin-top: 4vw; / 修改为相对单位vw / border-top: 0.1vw dashed #e5e5e5; / 修改为相对单位vw / padding: 3vw 0; / 修改为相对单位vw */ position: relative; }

@media screen and (max-width: 768px) { /* 在屏幕宽度小于等于768px时应用以下样式 / .mod-ct { padding: 0 7vw; / 修改为相对单位vw / } .mod-ct .tip .tip-text { font-size: 3vw; / 修改为相对单位vw / line-height: 4.2vw; / 修改为相对单位vw / } .mod-ct .tip .ico-scan { width: 8vw; / 修改为相对单位vw / height: 7.8vw; / 修改为相对单位vw / } .mod-ct .tip .dec-left { background-position: 0 -7.8vw; / 修改为相对单位vw / left: -20vw; / 修改为相对单位vw / } .mod-ct .tip { margin-top: 6vw; / 修改为相对单位vw / padding: 5vw 0; / 修改为相对单位vw */ } }

div class=mod-ct div class=amount$logorder_amountcurrencyprediv div class=qr-image id=qrcodeimg width=230px src=welcomeqrcodeweb_urltext=$uri&size=10 div div class=tipspan class=dec dec-lefts

原文地址: https://www.cveoy.top/t/topic/bAWJ 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录