pc页面改为响应式布局宽度问题

我们加了如下标签，使pc页面变为响应式布局

    <meta name="viewport" content="width=device-width, initial-scale=1">

在编写pc页面，如果不适用flex布局（伸缩布局），为了让版心居中我们通常添加如下css：

        .content {
            box-sizing: content-box;
            margin: 0 auto;
            width: 800px;
            padding: 40px 0;
            text-align: center;
            font-size: 16px;
        }

这段css中给中间content的盒子设置了宽度，倒了手机端会等比缩放，比如手机端的屏幕宽度只有325px，那么content缩放之后可能只占280px。也就是这时候800==280

但是pc页面中类似header、footer这些地方通常是不设置宽度，或者宽度默认100%，到了手机端直接变成325，这个缩放是和800比较的，所以这些不设置宽度的元素都会变得很窄。

解决：

1、设置明确的宽度