移動端佈局一
首先先了解html中這一句話的含義：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1，user-scalable=no">
width - viewport-的寬度 height - viewport的高度
initial-scale - 初始的縮放比例
minimum-scale - 允許使用者縮放到的最小比例
maximum-scale - 允許使用者縮放到的最大比例
user-scalable - 使用者是否可以手動縮放
然後在瞭解一個單位rem
rem是CSS3新增的一個相對單位（root em，根em）。這個單位與em有什麼區別呢？區別在於使用rem為元素設定字型大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層複合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器均已支援rem。對於不支援它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的宣告。這些瀏覽器會忽略用rem設定的字型大小。（當然移動端佈局不需要考慮這些相容的問題）
在瞭解一下手機螢幕解析度以及邏輯解析度（以iPhone為參照）
| 裝置 | 物理畫素 | 邏輯畫素 | 物理畫素/邏輯畫素 |
| iPhoneX | 1125*2436 | 375*812 | 3 |
| iPhone6splus |
1080 * 1920 1242 * 2208 |
414 * 736 |
3 |
| iPhone6 |
750 * 1334 |
375 * 667 |
2 |
| iPhone5 | 640*1136 | 320*568 | 2 |
| iPhone4 | 640*960 | 320*480 | 2 |
| iPhone 1G |
320*480 | 320*480 | 1 |
| iPhone 3G |
320*480 | 320*480 | 1 |
| iPhone 3GS |
320*480 | 320*480 | 1 |
螢幕大小相同，解析度越高，畫素點越小
今天先總結移動端的兩種佈局方式就是寫法以及例項明天將會總結第三種方法；
首先第一種：
就是在head部分加上
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1，user-scalable=no">
上程式碼都按照邏輯畫素點1:1的去寫程式碼
按設計圖與手機尺寸比例去算出相同效果大小的px值；
第二種：
運用rem去解決自動適應螢幕的大小比例；
程式碼如下：
<!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>
<!-- 自動獲取螢幕寬度設定html字型大小的js -->
<script>
(function(){ var
doc = document.documentElement,
resize = 'onorientationchange' in window ? 'orientationchange' : 'resize',
resizeEvent = function () {
// 獲取裝置寬度
var WIDTH = doc.clientWidth
// 設定寬度
doc.style.fontSize = 100 * WIDTH / 750 + "px"
}
window.addEventListener('DOMContentLoaded', resizeEvent)
window.addEventListener(resize, resizeEvent)})();
</script>
<style>
body{
margin: 0;
}
header {
height: .88rem;
background: red;
font-size: .32rem;
}
</style>
</head>
<body>
<!-- 以設計圖為標準
750px寬度時，將html字型大小設定為100px
375px寬度時，將html字型大小設定為50px -->
<header>文字文字文字文字文字文字文字文字文字文字文字文字文字</header>
</body>
</html>