響應式佈局案例實戰

阿新 • • 發佈：2020-08-03

響應式佈局案例實戰

前幾天做了一個響應式佈局的案例，這裡和大家分享一下，主要是總結一些經驗。

1.html程式碼

<body>
   <!-- 頭部 -->
   <header id="header">
     <div class="logo">
         <img src="images/largelogo.jpg" alt="logo" class="large">
         <img src="images/middlelogo.jpg" alt="logo" class="middle">
         <img src="images/smalllogo.jpg" alt="logo" class="small">
 
     </div>
     <div class="search">
       <input type="search" name="kw" placeholder="請輸入搜尋內容">
       <button>搜尋</button>
     </div>
     <div class="nav">
       <button id="btn">
         <span></span>
         <span></span>
         <span></span>
 
       </button>
       <ul>
         <li><a href="javascript:">首頁</a></li>
         <li><a href="javascript:">課程</a></li>
         <li><a href="javascript:">公告</a></li>
         <li><a href="javascript:">登入</a></li>
 
       </ul>
     </div>
   </header>
   <!--橫幅 -->
   <div id="banner">
     <img src="images/banner.jpeg" alt="banner">
   </div>
   <!-- 主體內容 -->
   <div id="main">
     <div class="row">
       <div class="col">
         <a href="javascript:">
           <img src="images/main1.jpeg">
         </a>
         <p>HTML5</p>
       </div>
       <div class="col">
         <a href="javascript:">
           <img src="images/main2.jpg">
         </a>
         <p>CSS3</p>
       </div>
       <div class="col">
         <a href="javascript:">
           <img src="images/main3.jpeg">
         </a>
         <p>LESS</p>
       </div>
       <div class="col">
         <a href="javascript:">
           <img src="images/main4.jpg">
         </a>
         <p>BootStrap</p>
       </div>
     </div>
     <div class="row">
       <div class="col">
         <a href="javascript:">
           <img src="images/main1.jpeg">
         </a>
         <p>HTML5</p>
       </div>
       <div class="col">
         <a href="javascript:">
           <img src="images/main2.jpg">
         </a>
         <p>CSS3</p>
       </div>
       <div class="col">
         <a href="javascript:">
           <img src="images/main3.jpeg">
         </a>
         <p>LESS</p>
       </div>
       <div class="col">
         <a href="javascript:">
           <img src="images/main4.jpg">
         </a>
         <p>BootStrap</p>
       </div>
     </div>
   </div>
   <!-- 頁尾 -->
   <footer id="footer">
   </footer>

</body>

2.css程式碼

<style>
     /* 初始化 */
     body {
       font-family: Arial;
       font-size: 14px;
       margin: 0;
       padding: 0;
       border: 0;
     }
     ul{
       list-style: none;
     }
     a{
       text-decoration: none;
     }
     .clearfix:after{
       content: '';
       display: block;
       clear: both;
     }
     body {
       background: #efefef;
     }

    /* 頭部 */
     #header{
       height: 40px;
       padding: 8px 0 15px 0;
       background: #88c5e1;
       border-bottom:5px solid #54abd4;
       position: relative;
     }
     /* 頭部logo */
     #header .logo {
       width: 25%;
       text-align: center;
       font-size: 0;
       float: left;
     }
     #header .logo img{
       height: 40px;
       display: none;
     }
     #header .logo img.large{
       display: inline-block;
     }
     @media (max-width: 1024px){
       #header .logo img.large{
         display: none;
       }
       #header .logo img.middle{
         display: inline-block;
       }
       #header .logo img.small{
         display: none;
       }
     }
     @media (max-width: 640px){
       #header .logo img.large{
         display: none;
       }
       #header .logo img.middle{
         display: none;
       }
       #header .logo img.small{
         display: inline-block;
       }
     }
     /* 頭部搜尋框 */
     #header .search {
       width: 50%;
       float: left;
     }
     @media (max-width: 640px){
       #header .search{
         width: 60%;
       }
     }
     #header .search input{
       width: 80%;
       height: 40px;
       box-sizing: border-box;
       padding: 0 10px;
       float: left;
       border: 1px solid #ccc;
       border-radius: 10px 0 0 10px;
     }
     #header .search button{
       width: 20%;
       height: 40px;
       box-sizing: border-box;
       float:right;
       border: 1px solid #ccc;
       border-radius: 0 10px 10px 0;
     }
     /* 頭部導航 */
     #header .nav {
       width: 25%;
       float: left;
     }
     #header .nav button{
       display: none;
     }
     #header .nav button span{
       display: none;
     }
     #header .nav li{
       width: 25%;
       float: left;
       height: 40px;
       text-align: center;
       font-size: 12px;
     }
     #header .nav li a{
       display: block;
       height: 40px;
       color:#fff;
     }
     #header .nav li a:hover{
       color:#888;
     }
     @media (max-width: 640px) {
       #header .nav{
         width: 15%;
       }
       #header .nav ul{
         position: absolute;
         top: 54px;
         left: 0;
         width: 100%;
         background: #88c5e1;
         height: 0;
         overflow: hidden;
         transition: .5s;
       }
       #header .nav ul.open{
         height: 160px;
       }
       #header .nav li{
         float: none;
         text-align: center;
         line-height: 40px;
         width: 79%;
         margin-top: 2px;
       }
       #header .nav button{
         display: block;
         padding: 9px 10px;
         border: 1px solid #ccc;
         border-radius: 4px;
         margin: 2px auto;
         background: transparent;
       }
       #header .nav button span{
         display: block;
         width: 22px;
         height: 2px;
         background: #888;
         margin-bottom: 5px;
       }
       #header .nav button span:last-child{
         margin-bottom: 0;
       }
     }
     /* banner */
     #banner img{
       width: 100%;
       height: 400px;
     }
     /* 主體內容 */
     #main{
       width: 1000px;
       margin: 10px auto;
     }
     #main .col{
       float: left;
       width: 25%;
       box-sizing: border-box;
       padding: 10px;
     }
     #main .col a{
       display: block;
     }
     #main .col p{
       padding:10px 0;
       text-align: center;
       font-size: 16px;
       font-weight: 700;
       background: #fff;
       margin-top: 0;
       box-sizing: border-box;
     }
     #main .col img{
       display: block;
       width: 100%;
       height: 300px;
     }
     @media (max-width: 1024px){
       #main .col{
         width: 50%;
       }
       #main{
         width: 100%;
       }
     }
     @media (max-width: 640px){
       #main .col{
         width: 100%;
       }
     }
     /* 頁尾 */
     #footer{
       clear: both;
       height: 400px;
     }   
   </style>

js程式碼

<script>
   (function(){
     var btn = document.querySelector("#btn");
     var navlist = document.querySelector(".nav ul")
     btn.onclick=function(){
       navlist.classList.toggle("open");
     }
   })();
</script>

3.效果圖

螢幕大於1024px

螢幕大於640px,小於1024px logo變了，主體內容變為兩列

螢幕小於640px logo變了，出現導航按鈕，點擊出現下拉列表，主體內容變為一列

4.總結

那個導航按鈕我為圖方便，我用的是span，其實可以用字型圖示（css精靈圖），用的所有插圖都是網上隨便找的，尺寸不是很合適，特別是banner那張圖，已經變形啦，但無傷大雅，主要是拿來練手，大家想好看，可以先在ps上處理下。
頭部和主體內容都是用浮動做的，其實可以用flex佈局，主要是考慮到float的相容性更好，在加上我們用的是pc優先，本來就是考慮其相容性比移動優先要好，所以乾脆讓其好上加好。
那個下拉選單是用定位做的，注意transition屬性不能與display一起使用，我們想隱藏某個div，也可以將其高度設為0，相當於display:none;但此時應該會使文字內容溢位，所以還要設定overflow：hidden;想要顯示時不能直接height：auto；要寫死一個固定高度，這樣才能實現一個過渡的動畫效果。按鈕可以看到是透明的，主要用來一個background:transparent;其實不設定背景的時候預設就是這個。
中間用了一點js，主要是控制導航按鈕，單擊按鈕會出現下拉列表。巧妙地在ul後面加上了一個open類，所以我們只要控制有無open類，就可以控制其顯示或隱藏，所以繫結按鈕。js用的自呼叫函式，也可以Windows.onload(太老啦)。toggle方法正好滿足我們的需求。
主體內容我沒有用margin來調每列盒子之間的距離，而是用的padding，圖片外的盒子設定一個padding，不加邊框，不加背景，在設定一個box-sizing:border-box;效果其實和用margin一樣，主要是這樣避免了最後還要將最後一個margin給去掉。
這只是一個很簡單的響應式佈局的案例，初學者可以拿來練練手，會對響應式佈局有更深的理解。