網頁佈局方式
網頁佈局的那些樣兒
- 固定佈局
- 流式佈局
- 彈性佈局
- 網格grid佈局
- 自適應佈局
- 響應式佈局
- 伸縮佈局
固定佈局
固定佈局（Fixed Layout）：網頁上所有的元素寬度以畫素（px）為單位，不用去在乎什麼裝置什麼瀏覽器，都是用同一套尺寸去進行佈局。在不同環境下的狀態時相同的，最常見PC端網頁上。
流式佈局
流式佈局（Liquid Layout）：元素的寬度按照螢幕解析度自動進行適配調整，保證當前螢幕解析度發生改變的時候，頁面中的元素大小也可以跟著改變。移動端一般採用流式佈局（百分比佈局）
- 左側固定，右側自適應等
- 兩側固定，中間自適應（聖盃佈局）
- 等分佈局
（1）左側固定，右側自適應
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style> （2）兩邊固定，中間自適應
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
height: 800px;
background-color: pink;
margin-left: 200px;
margin-right: 200px;
}
.left {
width: 200px;
height: 400px;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
.right {
width: 200px;
height: 600px;
background-color: green;
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>（3）等分佈局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
overflow: hidden;
}
li {
width: 25%;
float: left;
list-style: none;
background-color: pink;
height: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>彈性佈局
彈性佈局跟流佈局很像，網頁寬度不固定，使用em 或 rem 單位進行相對佈局，相對%百分比更加靈活，同時可以支援瀏覽器的字型大小調整和縮放等的正常顯示。但彈性佈局也有侷限性，如果不對這種佈局設定一個最小寬度，當用戶縮小視窗到足夠小時會造成佈局嚴重錯位。（外掛flexible.js）。
rem 結合vw進行移動端適配
設計圖為640px情況下：
dpr=2
640px/2=320px
100vw=320px
1vw=3.2px
100px/3.2px=31.25vw
font-size：31.25vw;
總結
設計圖640px
html{ font-size：31.25vw；}
設計圖750px
html{ font-size：26.67vw；}
移動端可以直接加*{box-sizing：border-box；}
不用再去對border和padding相減
移動端:
1、準備工作
1: meta標籤的設定(禁止縮放)
2: dpr裝置畫素比
3: rem單位 vw單位
vw 結合 rem實現移動端適配
設計圖為 640px html{ font-size:31.25vw; }
設計圖為 750px html{ font-size:26.67vw; }
rem的設定流程:
設計圖中的大小 / dpr / html的font-size == rem
2、分兩列的內容 寬度寫成百分比
flexible.js
流程：
1:引入外掛 flexible.js
<script src="flexible.js"></script>
2:刪除視口程式碼 mate
3：設計圖的大小 /100==rem
網格grid佈局
在我們的Web內容中，可以將其分割成很多個內容塊，而這些內容塊都佔據自己的區域(regions)，可以將這些區域想像成是一個虛擬的網格。到目前為止，在一個模板中使用不同的結構標籤，使用多個浮動和手動計算實現一個佈局。這對於Web前端人員來說，這是一件痛苦之事。而網格佈局將讓你擺脫這樣的困局，讓你的佈局方法變得非常簡單與清晰。
網格佈局給了我們一種方法——建立的結構與使用表格(table)佈局並沒有什麼不同。然而，他是在CSS中實現而不是在HTML中實現，同時還可以依賴於媒體查詢根據不同的上下文得新定義佈局。這對於喜歡響應式設計的同學來說是一個絕對利好的訊息。因為你不在需要再擔心你的HTML結構而影響你的佈局。
網格佈局還可以讓我們擺脫現在佈局中存在的文件流限制，換句話說，你的結構不需要根據設計稿從上往上佈置了。這也意味著您可以自由地更改頁面元素位置。這最適合你在不同的斷點位置實現你最需要的佈局，而不再需要為響應你的設計而擔心HTML結構的問題。
網格佈局
1、觸發網格佈局：
display：grid；（父元素）
2、設定幾行幾列
grid-template-columns：；
grid-template-rows：；
根據屬性值的個數確定行列數，屬性值可以使百分比，也可以是具體畫素
3、關鍵字 repeat（引數1，引數2）
引數1：重複幾次
引數2：列寬或行高
如：grid-template-columns：repeat（3,200px）；
4、關鍵字 auto-fill
在repeat（auto-fill）：不確定重複多少次
當容器不確定的情況下，不能用
5、關鍵字 fr（片段，分數）
注意：列寬的分數
如：grid-template-columns：1fr，2fr，3fr；
6、minmaix（最小最大）
列寬最小不低於多大，最大不超過某一直
7、關鍵字
auto：自動填充
8、設定行間距和列間距
grid-row-gap：；
grid-colum-gap：；
grid-gap：；
9、規定元素佔有的網格區域
grid-templete-areas：“a b c”“”；
注意：網格里面每個元素必須通過grid-area：； 指定名稱
10、排列順序
grid-auto-flow：；colum、row
11:設定每一個內容在單元格內部的對齊方式:
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items: <justify-items> <align-items> /*複合式寫法*/
12:設定整個內容區域在容器裡面的水平 | 垂直 對齊方式
justify-content:start | end | center | stretch | space-around |
space-between | space-evenly;
align-content: start | end | center | stretch | space-around |
space-between | space-evenly;
place-content: <justify-content> <align-content> /* 複合式寫法 */；
13、新增在子元素
grid-column：；
gird-row：；
自適應佈局
不同類別的裝置建立不同的靜態佈局，每個靜態佈局對應一個螢幕解析度範圍。改變螢幕解析度可以切換呼叫相應的佈局（頁面元素位置發生改變而大小不變），但在每個靜態佈局中，頁面元素不隨視窗大小的調整發生變化。可以把自適應佈局看作是靜態佈局的一個系列。
使用自適應佈局時，首先在網頁程式碼的頭部，加入一樣 viewport 標籤：
<meta name="viewport" content="width=device-width, initial-scale=1" />
響應式佈局
響應式佈局的目標是確保一個頁面在所有終端上（各種尺寸的PC、手機、ipad等）都能顯示出令人滿意的效果。通過檢測裝置資訊，決定網頁佈局方式，即使用者如果採用不同的裝置訪問同一個網頁，有可能會看到不一樣的展示效果，一般情況下是檢測裝置螢幕的寬度來實現。可以把響應式佈局看作是流式佈局和自適應佈局設計理念的融合。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /
width = device-width： 寬度等於當前裝置的寬度
initial-scale： 初始的縮放比例（預設設定為1.0）
minimum-scale： 允許使用者縮放到的最小比例（預設設定為1.0）
maximum-scale： 允許使用者縮放到的最大比例（預設設定為1.0）
user-scalable： 使用者是否可以手動縮放
媒體查詢
媒體型別和一個或多個檢查媒體特性的條件表示式組成
語法（媒體查詢一般放在 css程式碼最後面）
@media 媒體型別 and （ 表示式） and （表示式）{
選擇符{css樣式}
}
自適應佈局和響應式佈局對比：
不同點：
1.自適應需要開發多套介面； 響應式只需開發一套介面。
2.自適應對頁面的螢幕適配是在一定的範圍； 響應式是一套頁面同時相容在 pc 端、平板和手機端的各個不同視口，而不是為每個終端做一個特定的版本，所以需要考慮的狀態非常多。
相同點：
都是通過檢測視口解析度，使頁面適應不同解析度的視口。
伸縮佈局（Flex box）
使用css3 Flex 系列屬性進行相對佈局，用來為盒模型提供最大的靈活性。對於富媒體和複雜排版的支援非常大，但是存在相容性問題。任何一個容器都可以指定為 flex 佈局，行內元素也可以使用。
注意：設為 flex 佈局後，子元素的 float、clear、vertical-align 屬性將失效。
initial-scale： 初始的縮放比例（預設設定為1.0）
minimum-scale：允許使用者縮放到的最小比例（預設設定為1.0）
maximum-scale：允許使用者縮放到的最大比例（預設設定為1.0）
user-scalable：使用者是否可以手動縮放（預設設定為no，因為我們不希望使用者放大縮小頁面）