媒體查詢顯示：無

我的名字是傑弗裏，我剛開始創建網站。現在，因爲我很新，所以我的HTML/CSS知識很少，但在媒體查詢方面，我的知識幾乎爲零，我希望有人能幫助我，因爲我似乎無法自己解決這個問題。媒體查詢顯示：無

我有一個帶有標誌和文本菜單的div。由於我正在嘗試爲移動設備構建此網站，因此我想刪除該徽標並僅顯示該菜單。問題是，菜單將不會居中，而我的容器保持太小了......

body{margin:0;font-family:'Titillium Web';} 
 
a:hover{color:#60a642;} 
 
a{color:#000;text-decoration:none;} \t 
 
@media screen and (max-width:1155px) { 
 
\t #containerlogomenu {width:60% !important;} 
 
    #logo {padding:0px; margin-left:auto; 
 
\t margin-right:auto;} 
 
} 
 
@media screen and (max-width:761px) { 
 
\t #containerlogomenu {width:100%; padding:0px;} 
 
    #logo {display:none;padding:0px; margin-left:auto; 
 
\t margin-right:auto;} 
 
\t #menu {width:100%;} 
 
} 
 

 
\t 
 
#top{ 
 
\t width:100%; 
 
\t height:140px; 
 
\t background-color:#f2f2f2;} 
 

 
\t #containerlogomenu{ 
 
\t \t padding:20px; 
 
\t \t width:40%;} 
 
\t \t 
 
\t #logo{ 
 
\t \t float:left; 
 
\t \t padding-left:50px; 
 
\t \t padding-right:50px; 
 
\t \t width:60px; 
 
\t \t height:100px; 
 
\t \t background-color:#F00; 
 
\t \t background-repeat:no-repeat;} 
 
\t \t 
 
\t #menu{ 
 
\t \t font-weight:600; 
 
\t \t font-size:19px; 
 
\t \t text-align:left; 
 
\t \t line-height:110px; 
 
\t \t width:65%; 
 
\t \t float:right; 
 
\t \t color:#000;}

<div id="top" align="center"> 
 
\t <div id="containerlogomenu" align="center"> 
 
\t 
 
    \t <div id="logo"></div> 
 
     
 
\t  <div id="menu"> 
 
     \t <a href="#">HOME</a> | 
 
      <a href="#step1">STEP 1</a> | 
 
      <a href="#step2">STEP 2</a> | 
 
      \t <a href="#step3">STEP 3</a></div> 
 
      
 
    </div> 
 
</div>

我希望有人能夠幫助我！無論如何非常感謝您的時間和努力提前！

來源

2016-09-19 Jeffrey

僅豪我鏈接無或全部鏈接無在手機視圖??? –

您必須將所有其他CSS規則的媒體查詢放在下面，否則它們將被常規規則覆蓋。

來源

2016-09-19 13:50:48 Johannes

那麼簡單......但我不知道要尋找什麼...非常感謝！ – Jeffrey

嘗試這個

的jsfiddle例Here

片段實施例下面

body{margin:0;font-family:'Titillium Web';} 
 
a:hover{color:#60a642;} 
 
a{color:#000;text-decoration:none;} \t 
 
@media screen and (max-width:1155px) { 
 
#containerlogomenu {width:60% !important;} 
 
#logo {padding:0px; margin-left:auto; 
 
margin-right:auto;} 
 
} 
 
@media screen and (max-width:761px) { 
 
#containerlogomenu {width:100% !important; padding:0px;} 
 
#logo {display:none;padding:0px; margin-left:auto; 
 
margin-right:auto;} 
 
#menu {width:100%} 
 
    .HomeLink 
 
    { 
 
display:none; 
 
    } 
 
} 
 

 

 
#top{ 
 
width:100%; 
 
height:140px; 
 
background-color:#f2f2f2;} 
 

 
#containerlogomenu{ 
 
\t padding:20px; 
 
\t width:40%;} 
 
\t 
 
#logo{ 
 
\t float:left; 
 
\t padding-left:50px; 
 
\t padding-right:50px; 
 
\t width:60px; 
 
\t height:100px; 
 
\t background-color:#F00; 
 
\t background-repeat:no-repeat;} 
 
\t 
 
#menu{ 
 
\t font-weight:600; 
 
\t font-size:19px;  \t \t 
 
\t line-height:110px; 
 
\t width:100%; 
 
\t margin:0 auto; 
 
\t color:#000;}

<div id="top" align="center"> 
 
\t <div id="containerlogomenu" align="center"> 
 
\t 
 
    \t <div id="logo"></div> 
 
     
 
\t  <div id="menu"> 
 
     \t <a href="#" class="HomeLink">HOME</a> | 
 
      <a href="#step1">STEP 1</a> | 
 
      <a href="#step2">STEP 2</a> | 
 
      \t <a href="#step3">STEP 3</a></div> 
 
      
 
    </div> 
 
</div>

來源

2016-09-20 03:56:07

媒體查詢顯示：無

回答

相關問題