---
# System prepended metadata

title: 2. 常見版型佈局設定
tags: [rwd]

---

---
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;
}
```

![](https://i.imgur.com/34QeuBA.jpg)
![](https://i.imgur.com/8x1Bt5i.jpg)


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

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

![](https://i.imgur.com/Gwhs8uC.jpg)

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

![](https://i.imgur.com/eM14ISG.jpg)


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

![](https://i.imgur.com/0hgRBN7.jpg)


## Float: none 清除浮動並排效果
![](https://i.imgur.com/v4uCxfq.jpg)
* **清除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.基本結構
![](https://i.imgur.com/dxfuFQP.jpg)
```
<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和圖片自適應**: 
![](https://i.imgur.com/pvawl6T.jpg)

```
*,*: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高度自適應
![](https://i.imgur.com/j8l5jkU.jpg)


```
    .header{
      position: relative;
      height: 350px;
    }
    
    @media(max-width:768px){
      /*手機版menu會變直式所以讓高度自適應*/
      .header{
        height: auto;
      }
    }
```
* **logo** 把logo定位在header，範例用絕對定位講解，這裡也可以用float來寫，768px改relative
![](https://i.imgur.com/Aew7kU7.jpg)

    
* **menu** 
![](https://i.imgur.com/c0yETFc.jpg)


* **content** 浮動靠左並設定寬度75%     
![](https://i.imgur.com/G7b7QVh.jpg)

```
    .content{
      float: left;
      width: 75%;
      }
```
* **sidebar** 浮動靠右寬度20% 用margin-left推5%    
```
    .sidebar{
      float: right;
      width: 20%;
      margin-left: 5%;
    }
```
* **footer** 清除上面的浮動靠左靠右
```
    .footer{
       clear: both;
    } 
```