媒体查询css文件未检测 [英] Media query css file not detecting

问题描述

我设计了一个模板，我想让它响应，所以我包括一些媒体查询文件来实现它。但是，max-width：500px文件未正确检测。我真的不知道如何解决它。该网站工作正常在所有其他桌面屏幕分辨率。我不知道为什么它不工作在屏幕分辨率低于500px。我在css文件（中等选项卡）中做的是将菜单容器的显示设置为none，并通过写入display：block激活移动容器，以便其他菜单将自动激活。我如何解决这个问题？

I have designed a template and I wanted it to be responsive, so I included some media query files to achieve it. However the max-width: 500px file is not detecting properly. I really don't know how to solve it. The website works fine in all the other desktop screen resolutions. I don't know why it does not work in screen resolutions below 500px. All I did in that css file (medium-tab) was to turn the display to none for the menu-container and to activate the mobile container by writing display:block, so that the other menu will get activated automatically. How can I solve this issue?

 <link rel='stylesheet' media='screen and (max-width: 1024px)' href='css/medium-1024.css' />
        <link rel='stylesheet' media='screen and (max-width: 500px)'  href='css/medium-tab.css' />
        <link rel='stylesheet' media='screen and (min-width: 2559px)' href='css/medium-2560.css' />
        <link rel='stylesheet' media='screen and (min-width: 1367px)' href='css/medium-1400.css' />
        <link rel='stylesheet' media='screen and (max-width: 1366px)' href='css/medium-1366.css' />

推荐答案

请尝试此方法来解决您的问题。写所有的css只在一个文件名称为Style.css或任何你想要的。

Try this method to resolve your issue. Write all the css in only one file name it as "Style.css" or whatever you want.

在您的HTML

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

@media (max-width: 500px) {
 /*
  Write here the code you wrote in the style sheet of 500px.
 */
}

@media (min-width: 501px) and (max-width: 1024px) {
 /*
  Write here all the code of 1024px.
 */
}

width：previous-width + 1）和（max-width：next width）

and you can add more @media (min-width: previous-width + 1) and (max-width : next width)

始终按顺序添加文件或添加媒体文件。当代码写在文件末尾时记住该代码将被执行，并且上面写的代码将被覆盖。

always go add files or add media files in sequence. when the code is written near the end of file remember that code will be executed and the code which has been written above will be overwritten.

有些时候包括多个文件会导致一些问题。

Some time including more than one file causes some issues.

这篇关于媒体查询css文件未检测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！