php - 如何创建 3 个媒体查询。一种用于手机，一种用于平板电脑，一种用于全宽

Question

我有一个正在处理的网站(如下)，问题是:

在平板设备上查看时，顶部菜单布局不正确。它有点折叠在自己下面。

我认为纠正此问题的一种简单方法是简单地为出现问题的各个维度创建一个媒体查询，然后修改“tablet.css”媒体查询样式表的 css 以更改顶部菜单。

无论如何，我似乎无法让媒体查询在移动媒体查询和全屏 CSS 之间发挥作用。简而言之，我一次只能让两个 css 样式表相互切换。

这是网站: http://projectplay.staging.wpengine.com/

这是一个用 PHP 编写的 WordPress 实例。下面是我的两个当前工作媒体查询尝试的 header 代码。我省略了我的平板电脑尝试。

   <link rel='stylesheet' href='<?php echo bloginfo('stylesheet_url') ?>' media="only screen and (min-width: 480px)"/>
        <link rel='stylesheet' href='<?php echo TMM_THEME_URI; ?>/css/mobile.css' media="only screen and (max-width: 480px)">
        <link rel='stylesheet' href='<?php echo TMM_THEME_URI; ?>/css/custom1.css' type='text/css' media='all' />
        <link rel='stylesheet' href='<?php echo TMM_THEME_URI; ?>/css/custom2.css' type='text/css' media='all' />
        <link rel='stylesheet' href='<?php echo TMM_THEME_URI; ?>/css/skeleton.css' type='text/css' media='all' />

谢谢。

Answer 1

这是来自 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries 的示例.在这些示例中，max-width: 确定自定义 css 何时显示。还有 min-width 可以与 max-width 一起使用以针对特定尺寸范围。

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

或在您的 CSS 中:

@media (max-width: 600px) {
 .facet_sidebar {
  display: none;
 }