移動web基本知識

1.pixel像素基礎
1.px:csspixel 邏輯像素，瀏覽器所使用的抽象單位
2.dp,pt:設備無關像素
3.devicePixelPatio 設備像素縮放比例
2.viewport

1. ios的viewport是980px;廣泛

2.安卓不必定
注：爲何不使用默認的980px的佈局viewport
緣由：
寬度不可控制，不一樣的系統設備的默認值均可能不一樣
頁面縮小版顯示，交互性不友好
連接不可點
有縮放，縮放後又有滾動
例如font-size爲40px等於pc上12px同等物理大小，不規範
<meta name="viewport" content="name=value,name=value">來改變默認值
3.viewport meta標籤
<meta name="viewport" content="name=value,name=value">
1.width:設置佈局viewport的特定值,可是爲了適應全部的不一樣尺寸的手機屏幕大小，用，device-width自適應用戶的屏幕大小。
2.initial-scale:設置頁面的初始縮放：公式：window.innerWidth/document.body.ClientWidth.
3.minimun-scale:最少縮放
4.maximun-scale:最大縮放
5.user-scalable:用戶可否縮放
經常使用的viewport設置：<meta name="viewport" content="width=device-width,initial-sclae=1,user-scalable=no">
4.viewport_coding
方案一：設備實際寬度設計（經常使用）
手機寬320px。（按照這個尺寸從新設計）
方案二：1px=1dp
5.flexbox彈性合做佈局
父元素 用display:-webkit-flex;提示我這個容器要使用彈性佈局
子元素 用flex:1 num佔容器的比例
flex混合劃分：
width:100px flex:2 flex:1;
不定寬高的水平垂直居中：
例子：
position:absolute;
left：50%；
top:50%;
-webkit-tramsform:taanslate(-50%,-50%);
flexbox版： 不定寬高的水平垂直居中
例子：
.parent{
justify-content:center;//子元素水平居中
align-items:center;//子元素垂直居中
}
6.flex彈性盒子模型
混合：
width:100px flex:2 flex:1;
方向：
flex-direction:row//默認橫向
flex-direction:row-reverse;//相反方向
flex-direction:column//縱向
flex-direction:column-reverse;//縱向相反
flex-wrap
1.-webkit-flex-wrap:nowrap;//默認不換行
width:400px;
子元素超過父元素width;//不會換行；
2.-webkit-flex-wrap:wrap;//換行
width:400px;
子元素超過父元素width;//換行
3.-webkit-flex-wrap:wrap-reverse;//倒序換行
如下按照父、子元素均可
justify-content(橫向)
1.按left排：justify-content：flex-start;
2.按right排：justify-content：flex-end;
3.水平居中：justify-content:center;
4 兩邊對齊：justify-content:space-between:
5 按間距劃分：justify-content:space-around;
如下按照子元素排
align-self:(縱向)
1.順序：align-self:felx-start
2.倒序：align-self：flex-end;
3.垂直居中：align-self:center;
4.填滿：align-self:auto;
如下按照父元素元素排
align-items
1.子元素順序align-items:flex-start
2.子元素垂直倒序align-items:flex-end;
3.（第三代垂直居中）align-items:center;
order(排序)
a,b,c,d,e,
當給e加一個order:-1的樣式屬性值；順序變爲下
e,a,b,c,d;
6.flex彈性盒子模型 兼容性
ios 能夠使用最新
android4.4如下，只能兼容舊版的flexbox佈局
android4.4以上，能夠只用最新的flex佈局
7.核心：媒體查詢
例子：
@media screen and (max-width:1024px){
#pagewrap{
width:95.5%;
}
#content{
width:62%;
}
#content .article .hr{
width:66%;
margin-left:34%;
}
}
媒體類型：screen (屏幕) all(一樣)這兩種經常使用 print(打印機) handheld(手持設備)
經常使用媒體查詢參數類型：
width----視口寬度
height---視口高度
device-width-----設備的寬度
device-height----設備的高度
orientation:檢車設備出於橫向（landscape）仍是豎屏（porteait）
設計點一：百分比佈局
媒體查詢使用不一樣的固定寬度設計，只會從一組css到達另外一組css的切換。兩張之間的沒有任何平滑漸變。當沒有命中媒體查詢是，表現就會變得不可控制滾動，（滑行）
設計點二：彈性圖片
例子：
img{max-width:100%}
<div class="img">
<img />//百分比，時刻佔滿容器。
</div>
設計點三：從新佈局，顯示和隱藏
到達手機寬度時，有必要拋棄一些傳統的頁面，力求簡單，簡潔
1.同比例縮減元素的尺寸
2.調整頁面的結構佈局
3.隱藏冗餘的元素

常常，切換位置元素，使用（絕對定位），減小重繪提升渲染特性

1. 移動web樣式特別處理

1.一像素邊框
一樣是retina屏幕下的問題，根本緣由：1px 使用2dp渲染
border:0.5px;僅僅在ios8能夠使用

作法：sacleY(.5);
2.相對單位rem
em是根據父節點的font-size,變的很是難覺得何
rem更加能做爲全局統一的度量來作。
迴歸咱們的目的：爲了適應各大手機屏幕
rem=screen.width/20; //html的font-size rem基值爲屏幕寬度/10
3.不使用rem的狀況：font-size
字體的大小是趨於閱讀的實用性，並不適合於排版，同理的元素應如此
4.多行文本溢出
text-overflow:ellipsis;//超出變省略號
-webkit-box-orient:vertical;//方向，垂直
-webkit-line-clamp:4//第4行；

1. 300毫秒故事
   移動web頁面上的click事件響應都要慢上300毫秒。
   突破方法：Tap事件(自定義事件)代替click事件。
   移動框加庫 ：Zepto.js.
   Tap 「點透」的bug;
   解決：
   1.使用 緩動動畫，過分300ms
   2.中間層加一個透明的層，讓中間事件接受「穿透」事件，稍後隱藏
   3."上下"都使用tap事件，原理上解決tap穿透事件（但不可避免原生標籤的click事件）
   4.改用fastclcik庫
2. 觸摸：核心
   touchstart:手指觸摸屏幕觸發（已經有手指放屏幕上不會觸發）、
   touchmove:手指在屏幕滑動，連續觸發；
   touchend:手指離開屏幕時觸發
   touchcancel：系統取消touch時候不會觸發（不經常使用）
   觸摸事件專有的觸摸屬性：
   touches:跟蹤觸摸操做的touch對象數組
   clientX:觸摸目標在視口中的X座標
   clientY:觸摸目標在視口中的Y座標
   identifier:標識觸摸的惟一一個ID;
   pageX:觸摸目標在頁面中的X座標(涵滾動條)
   pageY:觸摸目標在頁面中的Y座標(涵滾動條)
   screenX:觸摸目標在屏幕中的X座標
   screenY:觸摸目標在屏幕中的Y座標
   target:觸摸的DOM節點目標
   彈性滾動：
   body層滾動：（系統特殊化處理）
   自帶彈性滾動，overflow:hidden失效，gif和定時器暫停
   局部滾動：
   沒有彈性滾動，沒有滾動慣性，不流暢
   局部開啓彈性滾動；
   body{
   overflow:scroll;
   -webkit-overflow-scrolling:touch;
   }
   注意，android不支持原生的彈性滾動！但能夠藉助第三方庫iScroll來實現
   /以上是針對於ios*/
   下拉刷新：
   頂端下拉一點距離頁面彈性滾動向下
   上拉加載：
   使用scroll事件而不是touch事件。(android有bug)

轉載於猿2048:▷《移動web基本知識》