---
tags: rwd
---
# 2. 常見版型佈局設定
## Flex RWD 排版方式
[伸縮自如的 RWD 排版術(上)](https://youtu.be/t13Fvg0_xHk)

[伸縮自如的 RWD 排版術(下)](https://youtu.be/Du_N0Vyh-Q0)

## max-width: 將網頁設定成流體式佈局
* width 寬度固定，螢幕內縮會出現x軸
* max-width 寬度最大為設定值，螢幕向內縮內容會自適應

範例: 寬度固定600px出現x軸，修改為max-width:600px，最大寬度600px內容自適應

wrap{
max-width:600px;
}


## 版型單位 % 數觀念
* 兩欄式
以兩欄式為例，wrap設定自適應max-width:500px;
左右兩欄都設定% 依父元素分配

* 左 menu width:30%
* 右 conten width:70%


## 三欄流體式設計
* wrap設定max-width:960px;
* li設定31.33333%，全部欄加起來100%(小數點設定到第五位)
* 在PC三欄、768變二欄、569變單欄


## 左側Float固定、右側流體式設計margin-left
* 左欄寬度固定 menu{width:200px; float:left;}
* 右欄使用邊距讓內容自適應 content{margin-left;210px;}


## Float: none 清除浮動並排效果
* **清除pc版的浮動**
768px設定float:none;
清除PC版的浮動，區塊就會由上往下排 (區塊特性)

@media(max-width: 768px){
  .menu{
    float: none; 
    width: 100%;
  }

* **清除pc版邊距**

@media(max-width: 768px){
    .content{
    margin-left:0;
    }
}

## 網站版型框架設定
* [codepen](https://codepen.io/tinchen/pen/NWgjVzY)

### 1.基本結構

<div class="wrap">
    <div class="header">    
        <h1 class="logo"><a href="#">LOGO</a></h1>
        <ul class="menu">
            <li><a href="#">公司簡介</a></li>
            <li><a href="#">專業服務</a></li>
            <li><a href="#">新聞與活動</a></li>
            <li><a href="#">活動花絮</a></li>
            <li><a href="#">聯繫我們</a></li>
        </ul>
    </div>
    
    <div class="content">
    </div>
    
    <div class="sidebar">
    </div>
    
    <div class="footer">
    </div>
</div>

* **在cssreset補上border-box和圖片自適應**:

*,*:before,*:after{
	box-sizing: border-box;
}

/*圖片自適應100%、高度auto*/
img{
	max-width: 100%;
	height: auto ;
}

### 2.code
* **wrap**

    .wrap{
      max-width: 960px;
      margin: 0 auto;
    }

* **header** 在768px menu會變直式所以讓header高度自適應

    .header{
      position: relative;
      height: 350px;
    }
    
    @media(max-width:768px){
      /*手機版menu會變直式所以讓高度自適應*/
      .header{
        height: auto;
      }
    }

* **logo** 把logo定位在header，範例用絕對定位講解，這裡也可以用float來寫，768px改relative

* **menu**

* **content** 浮動靠左並設定寬度75%

    .content{
      float: left;
      width: 75%;
      }

* **sidebar** 浮動靠右寬度20% 用margin-left推5%

    .sidebar{
      float: right;
      width: 20%;
      margin-left: 5%;
    }

* **footer** 清除上面的浮動靠左靠右

    .footer{
       clear: both;
    }