蘋果手機的尺寸:5s及以下都是320px 6是375px寬度 6plus是414px寬度 常用的安卓尺寸:320、360、480、540、640、720... 在真實項目中，設計師給我們的設計稿一般都是:640*960 / 640*1136 / 750*1334 響應式佈局的解決方案: 1）、流式布 ...
蘋果手機的尺寸:5s及以下都是320px 6是375px寬度 6plus是414px寬度
常用的安卓尺寸:320、360、480、540、640、720...
在真實項目中，設計師給我們的設計稿一般都是:640*960 / 640*1136 / 750*1334
響應式佈局的解決方案:
1）、流式佈局法
容器或者盒子的寬度一般都不寫固定的值，而是使用百分比（相對於視口區域的百分比）
其餘的樣式:字體、高度、margin、padding等等都按照設計稿上標註尺寸的一半來設置
對於有些屏幕尺寸下，我們設置的固定值看起來不是特別的好看的話，使用@media進行微調整
特殊情況:設計師的設計稿是640px,我們的素材圖也是640px的，這樣的話在iphone6/iphone6 plus展示的時候，圖片不夠大、對於這種情況我們需要單獨的找設計師要一張更大的圖。
@media all and (-webkit-min-device-pixel-radio:2) and (min-width:321px){}
@media all and (min-width:641px){}
2）、REM響應式佈局
我們做的H5頁面只是在移動端訪問(REM不相容低版本的瀏覽器)
REM:當前頁面中元素的REM單位的樣式值都是針對於HTML元素的fontSize的值進行動態計算的
第一步:從UI設計師拿到設計稿(PSD格式的設計稿) 640*1136
第二步:在樣式中給HTML設計一個fontSize的值，我們一般都設置一個方便後面計算的值，例如:10px、100px...這裡我們之所以用100px,主要是瀏覽器最小的字體大小都是12px，用10px比例計算的結果和真是UI設計稿會存在一點點的偏差
html{
font-size:100px;/*1REM = 100px*/
}
第三步:寫頁面，寫樣式
完全按照設計稿的尺寸來寫樣式，此時不用管任何的事情，設計稿給你的寬度、高度、字體大小、margin、padding的值是多少，我們就寫多少
但是我們在寫樣式值的時候，需要把得到的像素值除以100，計算出對應的REM的值，我們設定的也都是REM的值（值得註意的是:真實項目中外層盒子的寬度我們一般還是不寫固定值，我們沿用流式佈局法的思想，我們用百分比的方式佈局）
第四步:根據當前屏幕的寬度和設計稿的寬度來計算我們HTML的fontSize的值(當前屏幕的寬度/設計稿的寬度*fontSize)
設計稿:640 600*300 font-size=100
手機:320 300*150 font-size=50
當頁面的寬度大於設計稿的寬度的時候，可以通過判斷clientWidth 然後不再修改fontSize的值，頁面大小不在改變
有時候也會檢測瀏覽器和項目，當兩個都是pc端的或者移動端的，來跳轉到相對應的項目。window.location.href = xxx
