如何创建3个媒体查询。一个用于移动设备，一个用于平板电脑，另一个用于全宽

我有一个网站我正在处理（问题是）：如何创建3个媒体查询。一个用于移动设备，一个用于平板电脑，另一个用于全宽

在平板设备上查看时顶部菜单显示不正确。它本身就是一种折叠。

我想出一个简单的方法来纠正这种情况，只需简单地为问题发生的各个维度创建媒体查询，然后修改'tablet.css'媒体查询样式表的css以更改顶层菜单。

无论如何，我似乎无法获得媒体查询功能之间的移动媒体查询和全屏幕的CSS。总之我只能得到两个CSS样式表彼此之间切换一次。

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

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

<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' />

谢谢。

来源

2014-01-27 William

这里是从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; 
}

来源

2014-01-27 03:42:42 badAdviceGuy

你介意告诉我你是怎么发现的.facet_sidebar类。使用Chrome开发工具时，我没有看到显示。 – William

@TaoistWA，从我张贴的链接采取上述两个例子，并没有涉及到你的代码。您必须填写空白以使其适用于您的代码。 – badAdviceGuy

如何创建3个媒体查询。一个用于移动设备，一个用于平板电脑，另一个用于全宽

回答

相关问题