移動端 響應式、自適應、適配 實現方法分析（和其餘基礎知識拓展）

基礎拓展（最後補充是移動端適配可能兼容問題）：

像素：

設備獨立（邏輯）像素：
window.screen.width iphone6==>375
手機屏幕大小:別名叫點(一個點裏面能夠放多個像素)，是個單位（能夠量)
（1）橫豎屏切換，真機不會變，但模擬器裏面會改變
（2）在一個點裏面，能夠放多個像素
（3）這個值能夠改變(雙指縮放)

設備像素（物理像素）iphone6 750
屏幕分辨率（實際像素值）、沒法改變、虛擬的、沒法獲取

像素比（DPR）：
像素比 = 設備像素（分辨率）/獨立像素
沒法改變

如果尺寸不規則，手機顯示會再轉化一次：
iphone plus 414
dpr:3
414x3=1242
轉成1080

設計圖：
根據屏幕尺寸去設計：
寬度最小750px

 

 

適配實現方法：

一、百分百適配

二、比例縮放適配

三、viewport適配

四、rem適配

五、彈性佈局適配 flex

 

移動端適配：
不一樣尺寸手機設備，頁面相對正常顯示。

一、百分百適配 --- 2.html
（1）百分比值很差肯定
（2）要肯定父級大小，由於要根據父級大小計算
（3）寬度能夠設置但高度很差設置
配合其餘佈局使用。

二、比例縮放適配---3.html
（1）把全部機型設備獨立像素設置爲一致，如375
（2）viewport須要經過js動態設置（不能直接將device的值設爲數值）
（3)經過設置比例，將把寬度統一成一致
注意：viewport給了縮放值之後，最終頁面的寬度拿原來的值除以縮放比例，而不是乘縮放比例。
缺陷：
（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>

三、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>

四、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插件設置自動轉

 

五、彈性佈局適配 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;

 

 

六、移動端適配可能兼容問題
問題：
（1）ios移動端overflow:hidden;會出現滾動條不起做用。
.w{
width:200%;
overflow:hidden;
}
//ios會出現滾動條
（2）固定定位
a、移動端兼容性不是很好，老版本安卓和ios4前不支持
b、qq瀏覽器往上滑動，會隱藏header
c、打開鍵盤時候，固定定位失去做用。
解決：
一、css模擬
二、事件

（3）移動端樣式重置手機內核多爲webkita、接連點擊的時候，默認有背景-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和部分安卓不兼容