使用媒體查詢的響應式網頁設計

我正在嘗試製作響應式網頁。在頁面中，當瀏覽器的大小減小時，頁眉和頁腳正常工作，但導航部分的情況並非如此。目前正在減少（將網頁的左邊界移動到左側），網頁的大小爲將導航塊分成兩行。使用媒體查詢的響應式網頁設計

我想要的是像頁眉和頁腳一樣縮小導航塊的大小。我怎樣才能做到這一點？

<!DOCTYPE html> 
<html> 
<head> 
<title> Responsive </title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<style> 
div.container { 
    width: 100%; 
    border: 1px solid gray; 
} 

header, footer { 
    padding: 1em; 
    color: white; 
    background-color: black; 
    clear: left; 
    text-align: center; 
} 

nav { 
    float: left; 
    max-width: 160px; 
    margin: 0; 
    padding: 1em; 
} 

nav ul { 
    list-style-type: none; 
    padding: 0; 
} 

nav ul a { 
    text-decoration: none; 
} 

article { 
    margin-left: 170px; 
    border-left: 1px solid gray; 
    padding: 1em; 
    overflow: hidden; 
} 

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

    div.container { 
     width: 100%; 
    } 

    article { 
     margin-top: 20px; 
     margin-left: 0px; 
    } 

    .div1 { 
     height: 15px; 
     background-color: red; 
     font-size: 30px; 
     padding: 15px 10px; 
     font-weight: bold; 
    } 

    nav { 
     max-width: 600px; 
     margin-left: 40px; 
     overflow: hidden; 
     margin: 0; 
     margin-top: -50px; 
    } 

    nav ul { 
     text-align: center; 
     list-style-type: none; 
     padding: 0; 
     margin: 0; 
    } 

    nav ul li { 
     float: left; 
     display: inline-block; 
    } 

    nav ul a { 
     *display: block; 
     text-align: center; 
     text-decoration: none; 
     padding: 20px; 
    } 
} 
</style> 
</head> 
<body> 

<div class="container"> 

<header> 
    <h1>City Gallery</h1> 
</header> 

<div class = "div1"> 
<nav> 
    <ul> 
    <li><a href="#">London</a></li> 
    <li><a href="#">Paris</a></li> 
    <li><a href="#">Tokyo</a></li> 
    </ul> 
</nav> 
</div> 
<div class = "div2"> 
<article> 
    <h1>London</h1> 
    <p>London is the capital city of England. It is the most 
populous city in the United Kingdom, with a metropolitan area of over 
13 million inhabitants.</p> 
    <p>Standing on the River Thames, London has been a major 
settlement for two millennia, its history going back to its founding by 
the Romans, who named it Londinium.</p> 
</article> 
</div> 

<footer>Copyright © W3Schools.com</footer> 

</div> 

</body> 
</html>

來源

2016-08-01 Vatsala Sonal

您的代碼按預期工作;要測試媒體查詢，您不應該移動頁面邊緣，但是，您應該使用（例如）Chrome設備工具欄（按F12）。您的導航像其他部分一樣調整大小 – Luca

看到這裏jsfiddle

資產淨值的推移兩行，因爲鏈接（a）太大了，並且有一個大的填充20px。因此當屏幕變小時，您應該減少font-size以及padding。

例如像這樣：

@media screen and (max-width:768px) { 
    nav ul li a { font-size:20px;} 
} 
@media screen and (max-width:480px) { 
     nav ul li a { font-size:15px;padding:20px 10px} 
}

來源

2016-08-01 09:09:58

使用媒體查詢的響應式網頁設計

回答

相關問題