移動端 響應式、自適應、適配 實現方法分析（和其他基礎知識拓展）
基礎拓展（最後補充是移動端適配可能兼容問題）：
像素：
設備獨立（邏輯）像素：
window.screen.width iphone6==>375
手機屏幕大小:別名叫點(一個點裏面可以放多個像素)，是個單位（可以量)
（1）橫豎屏切換，真機不會變，但模擬器裏面會改變
（2）在一個點裏面，可以放多個像素
（3）這個值可以改變(雙指縮放)
設備像素（物理像素）iphone6 750
屏幕分辨率（實際像素值）、無法改變、虛擬的、無法獲取
像素比（DPR）：
像素比 = 設備像素（分辨率）/獨立像素
無法改變
若是尺寸不規則，手機顯示會再轉化一次：
iphone plus 414
dpr:3
414x3=1242
設計圖：
根據屏幕尺寸去設計：
寬度最小750px
適配實現方法：
1、百分百適配
2、比例縮放適配
3、viewport適配
4、rem適配
5、彈性布局適配 flex
移動端適配：
不同尺寸手機設備，頁面相對正常顯示。
1、百分百適配 --- 2.html
（1）百分比值不好確定
（2）要確定父級大小，因為要根據父級大小計算
（3）寬度可以設置但高度不好設置
配合其他布局使用。
2、比例縮放適配---3.html
（1）把所有機型設備獨立像素設置為一致，如375
（2）viewport需要通過js動態設置（不能直接將device的值設為數值）
（3)通過設置比例，將把寬度統一成一致
缺陷：
（1）同viewport設置固定寬度一樣，所有手機看上去都是同樣大小，沒有分別，不大好。如：ipad和iphone6顯示內容一樣
（2）算出的值在一些有小數的情況下可能會出現誤差，（無關緊要）因為設備獨立像素不能有小數。
<script type="text/javascript">
(function(){
/*
iphone 6plus
尺寸 curWidth 414
要變成 targetWidth 375
比例 scale 414/375
var screenWidth = window.screen.width;
var wWidth = 375;
var scale = screenWidth/wWidth;
var meta = document.createElement(‘meta‘);
meta.name = ‘viewport‘;
meta.content = ‘initial-scale=‘+scale+‘,minimum-scale=‘+scale+‘,maximum-scale=‘+scale;
document.head.appendChild(meta);
})();
</script>
3、viewport適配
根據dpr的值，將視口縮放，縮放到對應的物理像素。
缺點：
（1）不準確，dpr不為整數的時候，除不盡，算物理像素有誤差。
（2）如果屏幕分辨率非標準的話。iphone6 plus 414x3=1242 != 1080
<script type="text/javascript">
(function(){
/*
320 640
375 750
414 1242
像素比 var dpr = window.devicePixelRatio; 可以獲取
*/
var scale = 1/window.devicePixelRatio;
var meta = document.createElement(‘meta‘);
meta.name = ‘viewport‘;
meta.content = ‘initial-scale=‘+scale+‘,minimum-scale=‘+scale+‘,maximum-scale=‘+scale;
document.head.appendChild(meta);
})();
</script>
4、rem適配
px
絕對單位，屏幕改變長度不變
em
相對單位，相對父級
(1)chrom下，1em最小為12px
(2)相同元素內字體不一樣，就不能統一設置
rem
相對根節點
通過調整根節點大小，就可以按比例調整頁面元素大小
<script type="text/javascript">
var html = document.documentElement;
var w = window.screen.width;
html.style.fontSize = w/16+‘px‘; //1rem就等於該值
</script>
將屏幕分成16份，(數值都可以，一般16或15/18，看做的時候在什麽尺寸 320/16=20 375/15=25 1080/18=60)
ide軟件會自動計算px轉rem：
（1）less
可以設置變量
@rem:25rem;
div:nth-child(1){
width:187/@rem;
height:100@rem;
}
（2）sublime cssrem插件設置自動轉
5、彈性布局適配 flex
（1）父容器設置 display:inline-flex/flex; 內部子元素就會有flex屬性
（2）子元素排列方式，主軸和側軸flex-direction: row;(方向/)
row（默認） 向右 （行）
row-reverse 向左
column 向下 （列）
column-reverse 向上
沒有加 flex-wrap 屬性會在一行一列上顯示子元素內容。
（2-1）flex-wrap:wrap/wrap-reverse; （wrap包裹）
自動換行或換列,在有限空間內排列，超出換行換列。
row/column屬性加上wrap屬性，若是行，會設置縱向方向，若是列，會設置橫向方向。
row 橫向向右 wrap 縱向向下 wrap-reverse 縱向向上
column 向下 wrap 橫向向右 wrap-reverse 橫向向左
flex-direction和flex-wrap 簡寫方式。flex-flow:flex-direction flex-wrap;
*（3）order 添加給子元素，給指定子元素設置位置。
order:1; 默認都是0；設置order為1後會到結尾。
.cc div:first-of-type{
order:1;
}
（4）justify-content 添加在父級，控制元素在主軸展現方式，橫向方向。
子元素排列方式， flex-start(默認),flex-end(主軸尾部)、center(居中)、space-between(平均分配,首尾元素不分配空間)、space-around(平均分配空間)
（5）align-items,添加在父級，控制側軸展示方式，垂直方向。
stretch(默認) 縱向會拉伸，但若設置height/min/max-height就不會
center（垂直居中）
flex-start(flex頂部)
flex-end(flex底部)
*（6）align-self (伸縮項) 添加給子元素 flex-end flex-start
（7）align-content 和 justify-content 類似，區別待了解
（8）flex-grow/ flex-shrink /flex-basis 添加在子元素
flex-grow 右側空間拉伸，值為整值
flex-shrink 收縮程度，值為整值
可以簡寫為 flex: flex-grow flex-shrink flex-basis;
flex:none; -- 0 0 auto
flex 簡寫如果某個值不寫，那麽對應默認值是 1 1 0;
6、移動端適配可能兼容問題
問題：
（1）ios移動端overflow:hidden;會出現滾動條不起作用。
.w{
width:200%;
overflow:hidden;
}
//ios會出現滾動條
（2）固定定位
a、移動端兼容性不是很好，老版本安卓和ios4前不支持
b、qq瀏覽器往上滑動，會隱藏header
c、打開鍵盤時候，固定定位失去作用。
解決：
1、css模擬
2、事件
（3）移動端樣式重置
手機內核多為webkit
a、接連點擊的時候，默認有背景
-webkit-tap-highlight-color:rgba(0,0,0,0);
b、按鈕在ios都是圓角
-webkit-appearance:none;
border-radius:0;
c、設備默認字體不一樣（移動設備多沒有宋體和微軟雅黑）
font-familay:helvetica;
d、切換橫豎屏或者用戶自己通過瀏覽器設置，可以改變字體大小。（可以設置body下元素）
-webkit-text-size-adjust:100%;
e、長按文字ios下會選中文字，安卓不會。
-webkit-user-select:none;
f、固定定位低版本ios和部分安卓不兼容
移動端 響應式、自適應、適配 實現方法分析（和其他基礎知識拓展）