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

发布时间 2023-06-09 23:13:52作者: 时间羚羊
我们加了如下标签,使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、设置明确的宽度