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="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt=""><img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt=""><img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt=""></div><script src="https://code.jquery.com/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>

转载于:https://www.cnblogs.com/shimily/articles/6902135.html

pc端实现网页居中显示且自适应相关推荐

html手机端背景显示不全,手机浏览器打开PC端网站，背景显示不全怎么办？
原标题:手机浏览器打开PC端网站,背景显示不全怎么办? 随着移动互联网的发展,大多数企业在制作网站的时候,为了兼容各种设备,会制作出PC端.移动端二种版,根据不同的设备跳转到不同的网站,从而实现用户体 ...
判断移动端PC端访问网页时跳转到对应的移动端网页
原文引用于:http://www.cnblogs.com/yc-755909659/archive/2015/06/06/4556066.html 不想通过CSS自适应在PC端和移动端分别显示不同的样 ...
微信小程序 PC端与手机端显示不一致之tabBar导航栏
在编写微信小程序项目时,一开始为了显示出页面样式,我在app.json中,tabBar导航栏的list中设置了三个数组,对应三个导航块.但是三个导航块list中的pagePath设置为同一页面page ...
好签H5签字SDK,支持PC端实现网页手写
好签H5签字SDK是一种支持原笔迹手写的组件,支持PC端网页打开,提供手写签批功能,支持对PDF文件,插入签名.日期.文本等内容.原笔迹手写引擎是好签电子签署系统的核心技术产品之一,是南京好签软件技术 ...
将pc端的网页自适应显示在移动端
开发的pc网站没有兼容移动端,又要在移动端正常显示...... 终于解决了,如果页面有固定的内容宽度建议 meta:viewport的width设置内容宽度,也可以设置稍微大一点,比我开发的站点内容宽 ...
PC端 UC浏览器页面显示该站点安全证书的吊销不可用
错误提示解决办法关闭的操作步骤: 1.打开IE浏览器 2.在IE浏览器中单击右上角的[设置]图标,选择[Internet选项]进入到选项卡中. 3.在选项卡中找到[安全]选项,关闭如下三个选项,点 ...
Vue仿网易云PC端的网页
贴个网址:https://github.com/wangjie3186594/-PC- 声明一下:这个网页没做完!没做完!没做完! 本人新人一枚,按照的是我当前的学习进度做的项目,很多效果未 ...
【angularjs】使用angular搭建项目，pc端实现网页中的内容不可复制
实现目标:不可复制页面内容 js: <script language="javascript"> if (typeof(document.onselectstart) ...
百度网盘PC端登录安全验证显示空白页
只需要在IE的信任站点里添加如下地址就可以了:"https://passport.baidu.com"

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

pc端实现网页居中显示且自适应相关推荐

最新文章

热门文章

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

pc端实现 网页居中显示 且自适应相关推荐

最新文章

热门文章

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

pc端实现网页居中显示且自适应相关推荐