介紹了好多天的 RWD，今天來排一個完整一點的版型

第 11 屆 iThome 鐵人賽

DAY 21

自我挑戰組

破釜沉舟的轉職路-37歲從0開始成為一個軟體工程師系列第 21 篇

11th鐵人賽 modern web front-end

Alec

2019-09-29 10:18:00

1272 瀏覽

分享至

我們花了好多天的時間來介紹 RWD 的設計概念，但是每一個概念都比較片斷與零散一點，今天我們來把所有的概念整合一下，變成一個完整的 RWD 網頁吧，來看一下我們的 codepen。

下面就是這個網頁瀏覽器在縮小到768px及375px時做的改變。

今天因為是一個比較完整的頁面，所以程式碼比較龐大一點，下面就是 HTML。

<!DOCTYPE html>
<html lang=”en”>
<head>
 <meta charset=”UTF-8">
 <title>Document</title>
 <link rel=”stylesheet” href=”all.css”>
</head>
<body>
 <div class=”wrap”>
  <div class=”header”>
   <h1><a href=”https://www.apple.com/tw/">蘋果電腦</a></h1>
   <ul>
    <li><a href=””>Mac</a></li>
    <li><a href=””>iPad</a></li>
    <li><a href=””>iPhone</a></li>
    <li><a href=””>Watch</a></li>
    <li><a href=””>TV</a></li>
    <li><a href=””>Music</a></li>
    <li><a href=””>服務</a></li>
   </ul>
  </div>
  <div class=”content”>
   <div class=”left”>
    <div class=”article”>
     <h2>lorem</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente consectetur inventore aut laboriosam ipsam magni, vitae optio ut mollitia ducimus. Numquam delectus sit id molestias eos praesentium ad culpa in. Cum quo quis quas, molestias, facilis animi libero. Blanditiis a, deserunt. Quis nemo, porro dolor vitae. Obcaecati enim culpa quae magni, provident, pariatur, tempore aspernatur fugit sapiente reiciendis dolor harum eveniet rem adipisci, quia laboriosam eaque eius quisquam placeat explicabo ea officiis recusandae quos ducimus! Quaerat provident, asperiores tempora nisi ducimus excepturi consectetur perferendis aperiam quod odit rem, molestias dicta, ipsa tenetur repellendus soluta reiciendis aut neque non totam saepe quo? Ipsum, eligendi eveniet alias explicabo numquam quia ipsa velit ratione voluptatibus architecto dolor repudiandae corporis facilis sed voluptatum non accusantium iste voluptates sit earum saepe. Hic ipsa distinctio quam nostrum at! Laboriosam minus eligendi rem atque obcaecati, excepturi in dicta doloremque molestias provident quis explicabo nisi dolorem eius inventore impedit consequatur animi iste. Similique fugit quam deserunt dolores amet ab repudiandae dolorem aliquid natus repellat, delectus praesentium veritatis a voluptas eaque facere nisi, quae commodi itaque obcaecati sunt quod consequuntur. Vero ab fugiat, molestiae suscipit laboriosam cupiditate, consequuntur ipsam assumenda, voluptatum provident vel. Tenetur ipsa perferendis praesentium fuga vel nihil, fugiat recusandae temporibus, eum nemo consequatur! Accusamus unde dignissimos culpa pariatur, assumenda aliquid quasi delectus perspiciatis sed enim excepturi, explicabo, dolor autem mollitia modi ut animi fugit qui dolores ab sunt doloremque earum repudiandae laboriosam nostrum. Magni dolor laborum, consequatur accusantium illo ratione rerum maxime repudiandae et libero voluptas officia incidunt sapiente facere, aliquid architecto neque! Nulla quia deserunt eius esse nemo distinctio. Totam aperiam sequi, ex laborum incidunt nulla explicabo pariatur consequuntur, blanditiis enim minus! Aut ullam reprehenderit eveniet dolorum et excepturi, voluptatum quae cumque, minus ab minima! Distinctio harum ab enim nulla accusantium aspernatur delectus velit totam culpa consequatur neque ullam cupiditate porro illum quod explicabo praesentium eius ad, dolorem voluptates! Sint facilis fugit, dignissimos distinctio sapiente omnis labore at quibusdam? Atque, a. Aperiam et quaerat ducimus delectus alias ipsa earum optio modi, omnis voluptatibus eligendi, facilis veritatis impedit ad numquam est tempora quod harum illo. Voluptate!</p>
    </div> 
   </div>
   <div class=”aside”>
    <div class=”picture”>
     <ul>
      <li><img src=”https://lorempixel.com/output/technics-q-c-250–250–1.jpg” alt=””></li>
      <li><img src=”https://lorempixel.com/output/technics-q-c-250–250–2.jpg” alt=""></li>
      <li><img src=”https://lorempixel.com/output/technics-q-c-250-250-3.jpg" alt=””></li>
     </ul>
    </div>
   </div>
  </div>
 </div> 
</body>
</html>

然而 CSS 部分，因為比較長，所以我分段貼上分段說明。

.clearfix{
   clear:both;
}
.wrap{
   max-width: 1024px;
   margin: 0 auto;
}

首先不免俗的先放上了.clearfix讓float後面的網頁內容可以正常顯示及.wrap 來將網頁置中。

.header{
   border:1px solid black;
   margin:10px 0;
   background:grey;
   font-size:22px;
   padding:10px;
   height: 150px;
}
.header h1 a{
   background-image:url(https://upload.cc/i1/2019/09/13/ONnwx7.png);
   width: 128px;
   height: 128px;
   text-indent: 101%;
   overflow:hidden;
   white-space: nowrap;
   float:left;
   display: block;
}
.header ul{
   float:right;
   margin-top:55px;
   margin-right:20px;
}
.header ul li{
   float:left;
   margin-right:25px;
   font-size:18px;
}
.header ul li a{
   text-decoration: none;
   color:white;
   display: inline-block;
}

經過了上面的設定，使用float來讓.header ul li的選單並排，這時選單長這樣子。

後來新增了media query進來了，先新增@media(max-width:768px)的部分。

@media(max-width: 768px){
 .header{
    background: white;
    height: auto;
    border:none;
    padding: 0;
  }
 .header h1 a{
    float:none;
    margin: 0 auto;
  }
 .header ul{
    float:none;
    margin: 20px auto;
  }
 .header ul li{
    width: 14.28571%;
    font-size: 16px;
    margin: 0;
    text-align: center;
    background: grey;
    line-height: 30px;
  }
}

在@media(max-width: 768px)的設定裡，先將.header ul的float取消，讓他回到了<h1>下面，再將<h1>裡面的<a>的float也用none取消，並且使用{margin: 0 auto}來將圖片置中，並且將.header的background改為white，border取消。

然後.header ul的float被取消後，我們再將.header ul li的width設為14.28571%(七等分)，用{text-align: center;}將文字置中，原本有margin的取消歸0，backgroung和line-height調一調，當瀏覽器縮小到768px時，它就變成了下面這個樣子。

在來我們新增了@media(max-width: 375px)進來，像是下面這樣。

@media(max-width: 375px){
   .header ul li{
    float:none;
    width: 100%;
    border: 2px solid white;
    border-radius: 8px;
   }
}

media(max-width: 375px)的部分不多，重點是將.header ul li的float也用none取消，並且將width調整成100%，其他只是一些裝飾不贅述，當瀏覽器縮小到375px以下時，就變成下面這樣了。

以上就是.header內的變化。

再來我們來看看其他區塊.left和.aside發生了什麼事情。

首先是.left，程式碼不長，我把@media(max-width:768px)的也一起貼上。

.left{
   width: 60%;
   border:1px solid black;
   float:left;
   margin-right:1%;
   background:grey;
   padding:30px;
}
.left h2{
   font-weight: bold;
   font-size: 32px
}
.left p{
   font-size: 18px;
}
@media(max-width: 768px){
   .left{
      width: 100%;
      float: none;
      margin: 0;
   }
}

再來是.aside，我也一起貼上如下。

.aside{
   border:1px solid black;
   width: 38%;
   background:grey;
   margin-left: 1%;
   float: left;
}
.aside img{
   display: block;
   margin: 20px auto;
}
@media(max-width: 768px){
   .aside{
      width: 100%;
      float: none;
      margin:10px 0;
   }
}

.left和.aside這兩個區塊比較有關連我一次說明，其實很簡單，.left的width我設定60%，.aside的width我設定38%，然後我將它們都設定{float:left}並排，然後他們之間有一個margin我設定2%空間湊成了一個100%滿版版面，而.aside img裡面的圖片就讓他們可以置中，並且彼此有上下有20px的空間，我用{margin: 20px auto;}來實現他。
再來就是進入到@media(max-width: 768px)裡，.left和.aside都取消float並且width改100%，並且margin歸0，只有.aside的上下多了個10px。