快速提示：製作響應式標題的最簡單方法
製作漂亮、響應迅速的標題始終是一個棘手的過程。到目前為止，您需要使用浮點數或其他復雜的技巧，甚至必須手動調整像素值。但現在不行了！
我們即將向您展示的技術依賴於強大的 flexbox 佈局模式來為您完成所有繁瑣的工作。它僅使用少量 CSS 屬性來創建正確對齊且在所有屏幕尺寸上看起來都不錯的標題，同時使代碼更簡潔且不那麼 hacky。
技術
在我們的演示示例中，我們構建了一個標題，它分為三個部分，其中嵌套了典型的標題內容：
- 左側部分 - 公司徽標。
- 中間部分 - 各種超鏈接。
- 右側部分 - 一個按鈕。
您可以在下面查看代碼的簡化版本。
在第一個選項卡中是 HTML，我們將這些部分分組到單獨的 div 中 標籤。這使得 CSS 規則更容易應用，並且通常會生成更有條理的代碼。
在另一個選項卡中是 CSS，只需幾行，就可以完成為每個部分找到正確位置的整個工作。
點擊運行 按鈕打開現場演示。您可以通過調整框架大小來測試響應能力。
<header>
<div class="header-left">CoolLogo</div>
<div class="header-center">
<ul>
<li><a href="#">Our products</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<div class="header-right"><button>Buy now</button></div>
</header> header{
/* Enable flex mode. */
display: flex;
/* Spread out the elements inside the header. */
justify-content: space-between;
/* Align items vertically in the center. */
align-items: center;
} <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Easiest Way To Make Responsive Headers</title>
<link href='https://fonts.googleapis.com/css?family=Fugaz+One' rel='stylesheet' type='text/css'>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font: normal 16px sans-serif;
padding: 0 10%;
background: #eee;
}
body .container{
max-width:1200px;
margin:0 auto;
}
/* Header */
header{
/* Enable flex mode. */
display: flex;
/* Spread out the elements inside the header. */
justify-content: space-between;
/* Align items vertically in the center. */
align-items: center;
padding: 40px 100px;
color: #fff;
background-color: #488EAD;
}
.header-left{
font: normal 28px 'Fugaz One', cursive;
}
.header-left span{
color: #EAD314;
}
.header-center ul{
list-style: none;
}
.header-center ul li{
display: inline-block;
margin: 0 15px;
}
.header-center ul li a{
text-decoration: none;
color: #fff;
cursor: pointer;
font-weight: bold;
}
.header-right button{
color: #fff;
cursor: pointer;
font-weight: 800;
text-transform: uppercase;
padding: 12px 30px;
border: 2px solid #FFFFFF;
border-radius: 4px;
background-color: transparent;
}
.header-right button:hover {
background-color: rgba(255,255,255,0.1);
}
/* Main content */
.main-content{
padding: 60px 100px;
background-color: #fff;
line-height: 1.5;
color: #444;
}
.main-content h2{
margin-bottom: 38px;
}
.main-content p{
margin: 30px 0;
}
.main-content .placeholder{
margin: 40px 0;
height:380px;
background-color: #e3e3e3;
}
/* Media queries */
@media (max-width: 1200px){
header{
padding: 40px 60px;
}
.main-content{
padding: 100px 60px;
}
body {
padding: 0 5%;
}
}
@media (max-width: 1000px){
header{
/* Reverse the axis of the header, making it vertical. */
flex-direction: column;
/* Align items to the begining (the left) of the header. */
align-items: flex-start;
}
header > div{
margin: 12px 0;
}
.header-center ul li{
margin: 0 15px 0 0;
}
}
@media (max-width: 600px){
body {
padding: 0 10px;
}
.header-left{
margin-top:0;
}
header {
padding: 30px;
}
.main-content{
padding:30px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="header-left"><span>Cool</span>Logo</div>
<div class="header-center">
<ul>
<li><a href="#">Our products</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<div class="header-right"><button>Buy now</button></div>
</header>
<section class="main-content">
<h2>Header with three justify aligned sections</h2>
<p>Using the power of flexbox, the logo, links, and button of our header stay in their designated places, no matter the screen size. The <strong style="white-space: nowrap;">justify-content</strong> property offers a clean approach and allows us to align the section of the header without a hassle. No need for any floats, margins or crazy width calculations.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at congue urna, pellentesque faucibus justo. Integer a lorem a mauris suscipit congue luctus ut quam. Mauris pellentesque pellentesque mattis. In sed mi dignissim, faucibus elit at, rutrum odio. Mauris et velit magna. Maecenas iaculis eget sapien eu gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum a egestas magna. Aenean tellus elit, aliquet at lacinia at, accumsan eget neque. Maecenas rutrum risus quis sem scelerisque sagittis. Quisque sit amet turpis lorem. </p>
<div class="placeholder"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at congue urna, pellentesque faucibus justo. Integer a lorem a mauris suscipit congue luctus ut quam. Mauris pellentesque pellentesque mattis. In sed mi dignissim, faucibus elit at, rutrum odio. Mauris et velit magna. Maecenas iaculis eget sapien eu gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum a egestas magna. Aenean tellus elit, aliquet at lacinia at, accumsan eget neque. Maecenas rutrum risus quis sem scelerisque sagittis. Quisque sit amet turpis lorem. </p>
</section>
</div>
</body>
</html> 完全響應
space-between 即使屏幕尺寸發生變化，技巧也會始終注意對齊。但是，當視口對於水平標題來說太小時，我們可以通過更改 flex-direction 使其垂直 媒體查詢中的屬性。
@media (max-width: 1000px){
header{
/* Reverse the axis of the header, making it vertical. */
flex-direction: column;
/* Align items to the begining (the left) of the header. */
align-items: flex-start;
}
} 結論
這總結了我們的快速教程！我們希望您發現它有用並立即開始應用它。 Flexbox 現在有很好的瀏覽器支持，所以除非你的用戶群是 IE 重，否則可以應用這種技術而不會造成任何混亂。
要了解有關 flexbox 和我們使用的 CSS 屬性的更多信息，請查看以下鏈接：
- flexbox 快速指南
- 調整內容
- 對齊項目
- 彈性方向
下一篇
15 分鐘學會 Sass
