屏幕尺寸较小时，带媒体查询的CSS无法正常工作

Question

我使用Swiper创建了一个响应式网站。我在我的CSS中使用了@media查询来适应不同的屏幕大小和方向。

最初，我有1个主要的CSS，1个景观css和1个垂直css。我将两个方向css导入主css。只有主要的CSS在html文件中。该网站适用于所有屏幕尺寸。有关媒体的CSS代码段如下：

>>> string_keys([{Decimal(0): 'foo'}])
[{'0': 'foo'}]
>>> keys_to_decimal(string_keys([{Decimal(0): 'foo'}]))
[{Decimal('0'): 'foo'}]

然后我读到没有使用import for css所以我 @media screen and (orientation:landscape) and (min-width:700px) { @media screen and (orientation:landscape) and (min-aspect-ratio:16/10) { @media screen and (orientation:portrait) 将所有.css放入一个文件中。我还删除了两条cat行。然后该网站无法正常工作。具体来说，小屏幕上的所有元素都恢复正常大小。我查看了css结构：这些元素失去了@import中包含的样式，因此它们的父css固有。

所有代码的小提琴是here。它不起作用，因为它假设抓取本地图像文件。

具有单独css文件的工作网站为this。它在Github上，因此您可以轻松查看源文件。

我对css很新，所以这可能是一个愚蠢的错误。

Answer 1

如果您不想进口平板电脑和手机，请使用这些媒体屏幕，这将有助于感谢 在你的小提琴旁边显示这个在顶部} //]]＆gt;我不知道为什么可能是js问题或正文中的一些文字

@media only screen and (max-width: 1024px){}
@media only screen and (max-width: 768px){}
@media only screen and (max-width: 767px){}