如何让h5页面在PC端显示居中

Thugstyle_

于 2020-11-20 11:07:35 发布

阅读量3.7k

点赞数

文章标签： javascript css html5

本文链接：https://blog.youkuaiyun.com/weixin_45885847/article/details/109842773

版权

最近在开发h5的时候，遇到了一个需求，要求在pc端展示h5页面时，页面能正好在pc屏幕的中间，我是怎么实现的呢？快跟我一起看看吧！

页面效果

在这里插入图片描述

起初h5页面开始编写的时候用的rem布局，于是就有了下面的代码：


```javascript
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
 //得到html的Dom元素
let htmlDom = document.getElementsByTagName('html')[0];
 //设置根元素字体大小
htmlDom.style.fontSize = htmlWidth / 7.5 + 'px';

但是这样，默写页面标签width给100%的时候，在pc端样式就被拉长了
于是，我又在原基础上修改了一下：

```javascript
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
let htmlDom = document.getElementsByTagName('html')[0];
//控制最大尺寸
let finalSize = (htmlWidth / 7.5) > 75 ? 75 : (htmlWidth / 7.5);
/