CSS 更改不会反映在移动设备上

Question

我真的很难让我的 CSS 用于移动工作。在笔记本电脑和 ipad 上一切正常，但在 Iphone 上我似乎无法正常工作。

其中一个例子是徽标，我通过以下方式告诉它在移动设备上要小一点：

@media screen and (min-width: 48.0625em)
.table-first {
    width: 100px;
    flex: 0 0 100px;
}
.table-first {
    display: table-cell;
    vertical-align: middle;
    width: 75px;
    flex: 0 0 75px;
    max-width: 100px!important;
    display: block;
}

我已经尝试了所有@media 选项 min-width、min-device-width、max-width 等。它根本没有改变。我想要实现的是使搜索栏变小并在屏幕上显示图标。任何 CSS 更改根本不会反映在手机上。

在head html中添加如下代码：

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

Answer 1

您需要在媒体查询条件之后包装您的代码：

@media screen and (min-width: 48.0625em) {
    .table-first {
        width: 100px;
        flex: 0 0 100px;
    }
    .table-first {
        display: table-cell;
        vertical-align: middle;
        width: 75px;
        flex: 0 0 75px;
        max-width: 100px!important;
        display: block;
    }
}

另外，最好用一些像素值替换您的min-width: 48.0625em

Answer 2

将最大宽度 em 更改为 px 并 将第二个表格换成第一个

**或使用此代码：**

@media screen and (max-width:768px)
    .table-first {
        width: 100px;
        flex: 0 0 100px;
    }
    .table-first {
        display: table-cell;
        vertical-align: middle;
        width: 75px;
        flex: 0 0 75px;
        max-width: 100px!important;
        display: block;
    }
}