CSS媒体屏幕

我正在使用适应不同屏幕尺寸的Joomla模板。当屏幕没有足够的宽度时，“主菜单”将变为移动版本。这在手机和小型平板电脑上运行良好，但在iPad等迷你型高分辨率平板电脑上，主菜单不会更改为移动版本。CSS媒体屏幕

我的目标是始终显示菜单的移动版本，无论设备的屏幕有多大。

我相信，我需要改变的是该行的CSS文件：

@media screen and (max-width: 750px){

我试图改变750px到1080px，但没有任何反应。我甚至将750像素更改为10像素，并且网站的行为相同。

所有@media查询：

/* MOBILE ONLY CALLS 
----------------------------------------------------------- */ 

@media screen and (max-width: 750px){ 

/* VERY SMALL CSS 
----------------------------------------------------------- */ 

@media screen and (max-width: 240px){ 

    /* Retina Display Images */ 
    @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {

原来的CSS文件：http://www.mediafire.com/view/s4ng67ng6m4g4f9/s5_responsive_bars.css

来源

2014-09-19 maeq

使用@media屏幕（最小宽度：750px）和（最大宽度：765px） – SanRyu 2014-09-19 08:35:33

“我的目标是始终显示菜单的移动版本，不管有多大设备的屏幕“你的意思是只有移动设备或PC屏幕呢？请添加模板用于帮助您调试它们的所有媒体查询。 – emmanuel 2014-09-19 08:39:03

这取决于ipad（或手机）的分辨率 - 有些具有高清晰度，因此屏幕尺寸实际上与某些台式机相同。 [您可以使用js来检测设备类型]（http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-handheld-device-in-jquery），然后改变基于这个样式 – Pete 2014-09-19 08:44:26

会有一些类隐藏在主菜单中，并显示像.main-menu { display: none; } .mobile-menu { display: block; }移动。

你必须找到，把它放在媒体查询之外，并从媒体查询中删除所有的菜单类实例。

希望这有助于

来源

2014-09-19 08:55:56 emmanuel

我会试试看，谢谢 – maeq 2014-09-19 09:00:51

顺便说一句...这是原始的css文件..如果你想给它一个尝试.. http://www.mediafire.com/view/s4ng67ng6m4g4f9/s5_responsive_bars.css – maeq 2014-09-19 09:10:07

你必须在媒体查询之外＃s5_menu_wrap {display：none;}以及以＃s5_responsive_mobile_drop_down_menu开头的所有规则。 – emmanuel 2014-09-19 09:16:15

CSS媒体屏幕

回答

相关问题