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更改都不会在手机上反映出来。

将以下代码添加到header 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

将Max-widthem改为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;
}
}