500字范文,内容丰富有趣,生活中的好帮手!
500字范文 > pc端实现 网页居中显示 且自适应

pc端实现 网页居中显示 且自适应

时间:2020-09-23 16:24:06

相关推荐

pc端实现 网页居中显示 且自适应

通过给最外层添加绝对定位和translate(-50%,-50%) scale(ratio)来实现居中且适度缩放。

<!DOCTYPE html ><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge" /><title>pc端实现 网页居中显示 且自适应</title><style>*{margin: 0; padding: 0;}.evt-content{width: 800px; height: 1000px; border: #ccc 2px solid; margin: 0 auto;}</style></head><body><div class="evt-content"><img src="/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt=""><img src="/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt=""><img src="/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt=""></div><script src="/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script><script type="text/javascript">(function(){function createResponsiveStyle() {var style = document.createElement("style");style.type = "text/css";document.head.appendChild(style);return {setStyle: function (text) {style.innerHTML = "";if( style.styleSheet ){style.styleSheet.cssText = text;} else {style.innerHTML = text;}},getRespStyle: function(){var ratio = Math.max(0.65, Math.min(1, window.innerHeight/960));return ".evt-content{" +"position:absolute;height:800px;left:50%;top:50%;" +"-webkit-transform:translate(-50%,-50%) scale("+ratio+");" +"transform:translate(-50%,-50%) scale("+ratio+");" +"-webkit-transform-origin:50% 50%;" +"transform-origin:50% 50%;" +"}";}}}var respStyle = createResponsiveStyle();respStyle.setStyle(respStyle.getRespStyle());$(window).resize(function () {respStyle.setStyle(respStyle.getRespStyle());});})();</script></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。