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 更改都不会反映在移动设备上 phone。

下面的代码添加到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

change the Max-width em to px and wrap the second table to first

**或使用此代码：**

@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;
    }
}

CSS 更改未反映在移动设备上

CSS changes are not reflected on mobile devices

css

iphone

mobile

ios