关于页面布局宽高的心得

1.页面宽度：如下设置可以让屏幕居中显示，并且随浏览器横向缩放宽度会自适应处于最小宽度和最大宽度之间

.container {
  position: relative;
  min-width: 1130px;
  max-width: 1296px;
  margin: 0 auto;
}

2.高度：footer不是固定定位的，但是需要距离底边100px，此时需要设置内容区高度与设备窗口可视高度相同，偶尔还需要减掉固定header的高度。

在vue中，通过计算属性获取内容区高度，64是header高度

contentHeight(){
      return document.documentElement.clientHeight - 64
}

<div class="container" :style="{height:contentHeight+'px'}">

可以尝试在css里 height:calc(100vh - 64px); //注意减号两边必须有空格

3.水平居中显示时尽量用margin: 0 auto; 而不是position，因为position脱离文档流，回去其他内容造成影响，特别是父级元素的布局，父如果有兄弟元素影响会很大。建议只在对最小级别的元素用position居中。