如何让移动浏览器单独留下一个元素

Question

所以我使用flexbox在大屏幕上显示时连续显示一组部分，然后在屏幕缩小时显示一个部分。 这适用于我的计算机，当我在Chrome上使用移动模拟器时，但当我在我的手机上使用任何浏览器（Safari，Chrome，Firefox）时，它会调整它的大小，因此两个部分彼此相邻，因此使单词太小而无法读取。

现在我尝试添加这个：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> 

但这与页面其余部分的格式混淆了。 是否有类似的东西，只有一个元素？

Answer 1

您可以使用媒体查询让行为仅在某些分辨率上发生，因此它实际上只能在移动设备上运行。以下媒体查询将在所有手机上运行包含的样式。

@media only screen and (max-width:766px) {
    .myClass {width:100vw;display:block;}
}