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

回答

相關問題