一、下面我將簡單的介紹移動端布
局的八種方式：
1.固定布局
2.流動布局
3.浮動布局
4.定位布局
5.混合布局
6.flex布局
7.rem布局
8.響應式布局
9.**圣杯布局10.**雙飛翼布局
1.固定布局方法里把加好，然后根據設計稿設定相應的寬度即可，其他地方類似于pc端。優點思路沿用pc端，上手比較快缺點
大屏手機顯示網頁比較寬，而固定布局寬度參照永遠是固定的寬度（設計稿的大小），導致左右兩邊會有空白。手機橫屏的時候兩邊空白更亮。
2.流動布局
方法
適用百分比(%)做單位。
優點能更很好的適應各個屏幕分辨率的手機。缺點
不夠靈活，添加元素時，需要更改其他元素的值。
3.浮動布局方法
float+clearfix(清除浮動)
/--不需兼容老版本--/
.clearfix:after{
content:"";
display:block;
clear:both;
}
--需要兼容老版本--/
clearfix:after{
content:"";
display:block;
clear:both;
height:0;
visibility:hidden;
}
**優點**? ? ? ? 這是傳統的浮動方式，寫法簡單，實現效果起來干脆利落? ? **缺點**對浮動元素要求比較嚴格，布局也不太靈活
4.定位布局方法在布局當中很常用，利用position+四個方位的具體值（top/left/right/bottom）相互配合，實現起來也比較容易優點
實現簡單，在移動端中，定位很常用，尤其是彈窗，
.mask{
position:fixed;
left:50%;
top:50%;
-webkit-transform:translate3d(-50%,-50%,0);
transform:translate3d(-50%,-50%,0);
}
缺點
移動端中頻繁的使用定位，會出現一些莫名的bug;
fixed+input在ios上存在bug,會出現使用fixed布局的元素亂掉。在android手機上當input框獲取焦點時，換氣鍵盤，會出現定位的元素被抬升至手機鍵盤的上方。（了解）
5.混合布局方法所謂混合布局，就是把所有學到的知識靈活運用在布局中。例如：rem+百分比(流動布局) flex+rem等優點布局靈活，集合其他布局的優勢達到自己的布局要求缺點
代碼有點累贅；代碼不統一，維護困難
6.flex布局(重點)
方法
也叫彈性布局。
/--只需父元素設置--/
{
display:-webkit-box; /android2.1-3.0 ios 3.2-4.3/
display:-moz-box; /firefox/
display:-webkit-flex; /chrome 21+/
display:-ms-flexbox; /wp ie 10/
display:flex; /android 4.4/
}
/--然后子元素設置相應的比例--/
{
-webkit-box-flex:1;
-webkit-flex:1;
-ms-flex:1;
flex:1;
}
這個是最簡單的flex布局了，其實彈性布局里面還有很多簡單高效實用的屬性，很方便移動端的布局。? ? **優點**? ? ? ? 自適應很好，靈活性很強，目前在移動端應用的還是比較廣泛。? ? **缺點**需要寫很多兼容代碼。
7.rem布局方法rem是通過根元素進行適配的，網頁中的根元素指的是html我們通過設置html的font-size大小就可以控制rem的大小。有以下兩種適配方式：
1.rem+@media(通過媒體查詢設置html的font-size值，達到自適應)
html{
-webkit-text-size-adjust:none;
font-size:10px;
}
@media screen and (min-width:321px) and (max-width:375px){
html{
font-size:10px;
}
}
@media screen and (min-width:376px) and (max-width:414px){
html{
font-size:10.25px;
}
}
@media screen and (min-width:415px) and (max-width:454px){
html{
font-size:10.5px;
}
}
@media screen and (min-width:455px) and (max-width:554px){
html{
font-size:10.75px;
}
}
@media screen and (min-width:455px){
html{
font-size:11px;
}
}
2.rem+js（通過js自動獲取設備寬度，計算得到相應設備下html的font-size值達到自適應）（了解）
!function(n) {
var e = n.document,
t = e.documentElement,
i = 720,
d = i / 100,
o = "orientationchange" in n ? "orientationchange": "resize",
a = function() {
var n = t.clientWidth || 320;
n > 720 && (n = 720),
t.style.fontSize = n / d + "px"
};
e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
} (window);
優點在任何設備下都可以達到完全適配，頁面布局樣式完全自適應缺點
rem+@media這種方式不能所有設備全適配
8.響應式布局方法使用@media(媒體查詢)設置頁面在不同的屏幕寬度下達到自適應以及響應式（根據不同屏幕大小，頁面布局，樣式會做出相應的調整）典型案例（bootStrap官網）優點不僅在不同的屏幕下達到自適應，還會在相應的屏幕下對頁面布局，樣式做出相應的調整，達到更加的用戶體驗缺點
兼容各種設備工作量大，效率低下；代碼累贅，會出現隱藏無用的元素，加載時間過長；一定程度上改變了網站原有的布局結構，會出現用戶混淆的情況；增加UI和開發的工作量。
9.圣杯布局
利用float來實現，首先將三列放到一個父元素內后左浮動，之后給左右中分別設置寬度200px,250px,100%。
之后給中間，右邊分別設置margin-left為-200px,-250px。之后再將左右兩列進行相對定位position：relative;并分別設置left:-200px;right:-250px;最后便是等高布局了，給左中右設置padding-bottom:2000px;margin-bottom:-2000px;給其父元素設置overflow:hidden即可。
[圖片上傳中。。。（1）]
10.雙飛翼布局
用float來實現，首先將左中右分別設置寬度為200px,100%,250px。中右分別設置margin-left為-200px和-250px.中間元素下有一個子元素，設置margin-left和margin-right分別為200px余250px。最后便是等高布局了，給左中右設置padding-bottom:2000px;margin-bottom:-2000px;給其父元素設置overflow:hidden即可。
[圖片上傳中。。。（2）]
[圖片上傳中。。。（3）]
二、雜貨
手機端字體標準font-family: Helvetica, "Microsoft Yahei", "Heiti SC", "Droid Sans", "Droidsansfallback", SimSun, sans-serif;
1.觸摸事件touch
touchstart 手指放在屏幕上觸發
touchmove 手指在屏幕上移動，連續觸發
touchend 手指離開屏幕觸發
touchcancel 當系統停止跟蹤時觸發，當一些更高級別的事件發生的時候（如電話接入或者彈出信息）會取消當前的touch操作，即觸發ontouchcancel。一般會在ontouchcancel時暫停游戲、存檔等操作。
注意：
移動端的事件會觸發瀏覽器的默認行為，所以在調用事件的時候要把默認行為阻止了ev.preventDefault。
document.addEventListener('touchstart',function(ev){
ev.preventDefault();
});
var box=document.getElementById("box");
box.addEventListener('touchstart',function(){
this.innerHTML='手指按下了';
});
box.addEventListener('touchmove',function(){
this.innerHTML='手指移動了';
});
box.addEventListener('touchend',function(){
this.innerHTML='手指離開了';
});
2.touch事件對象
ev.touches 當前屏幕的手指列表
ev.targetTouches 當前元素上的手指列表
ev.changedTouches 觸發當前事件的手指列表
每個touch對象都包含了以下幾個屬性（打印ev.touches如下）：
[圖片上傳中。。。（4）]
clientX //觸摸目標在視口中的X坐標。 clientY //觸摸目標在視口中的Y坐標。 Identifier //標示觸摸的唯一ID。 pageX //觸摸目標在頁面中的X坐標。 pageY //觸摸目標在頁面中的Y坐標。 screenX//觸摸目標在屏幕中的X坐標。 screenY //觸摸目標在屏幕中的Y坐標。
target // 觸摸的DOM節點目標。
代碼：
var box=document.getElementById("box");
//相當于mousedown
box.addEventListener('touchstart',function(ev){
//console.log(ev.touches);
this.innerHTML=ev.touches.length;//按下手指數
});
3.設備加速度事件devicemotion(了解：知道有這么個東西，面試移動端時項目會問到)
devicemotion 封裝了運動傳感器數據的事件，可以獲取手機運動狀態下的運動加速度等數據。
其中加速度的數據包含以下三個方向：
x：橫向貫穿手機屏幕；
y：縱向貫穿手機屏幕；
z：垂直手機屏幕
[圖片上傳中。。。（5）]
鑒于有些設備沒有排除重力的影響，所以該事件會返回兩個屬性：
1、accelerationIncludingGravity(含重力的加速度)
2、acceleration(排除重力影響的加速度)
注意：這個事件只能放在window身上
demo1:顯示重力加速度的值
代碼：
window.addEventListener('devicemotion',function(ev){
var motion=ev.accelerationIncludingGravity;
box.innerHTML='x:'+motion.x+'
'+'y:'+motion.y+'
'+'z:'+motion.z;
});
demo2:方塊跟著重力左右移動
window.addEventListener('devicemotion',function(ev){
var motion=ev.accelerationIncludingGravity;
var x=parseFloat(getComputedStyle(box).left);//box目前的left值
box.style.left=x+motion.x+'px';
});
demo3:搖一搖應用原理
var box=document.getElementById('box');
var lastRange=0; //上一次搖晃的幅度
var isShake=false; //決定用戶到底有沒有大幅度搖晃
window.addEventListener('devicemotion',function(ev){
var motion=ev.accelerationIncludingGravity;
var x=Math.abs(motion.x);
var y=Math.abs(motion.y);
var z=Math.abs(motion.z);
varrange=x+y+z;//當前搖晃的幅度if(range-lastRange>100){//這個條件成立說明用戶現在已經在大幅度搖晃isShake=true;}if(isShake &&range<50){//這個條件成立，說明用戶搖晃的幅度很小了就要停了box.innerHTML='搖晃了';? ? isShake=false;}
});
4.media
min-width:? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 當屏幕大小 大于等于 某個值的時候識別max-width:? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 當屏幕大小 小于等于 某個值的時候識別? ? ? ? ? ? ? ? ? 關鍵字：and only not@mediaall and (min-width:500px) {? ? ? ? ? ? #box{background-color: green;? ? ? ? ? ? }? ? ? ? }
5.引入方式
1.2.@importurl(01.css) (min-width:400px);3.@media all and (min-width:500px) {? ? ? ? ? ? ? ? #box{background-color:green;? ? ? ? ? ? ? ? }? ? }
6.關于bootstrap
1.柵格化系統 ：將一行分為12列
容器：
container
固定寬度
container-fluid? ? 百分比寬度
行：row
列：lg 大屏幕 大桌面顯示器 (≥1200px)
md 中等屏幕 桌面顯示器 (≥992px)
sm 小屏幕 平板 (≥768px)
xs 超小屏幕 手機 (<768px)
body{
margin: 0;
}
div{
height: 100px;
background-color: #f00;
font-size: 50px;
color: #fff;
}
.row div{
height: 100px;
background-color: yellow;
border: 1px solid #000;
}
2.col-md-offset-設置列偏移
1
2
3..col-md-push-(往后) 和 .col-md-pull-*（往前） 列排序4. hidden-xs 超小屏幕消失
visible-xs 超小屏幕顯示
7.移動端適配
1.百分比適配
弊端：height無法設置
2.viewport 適配
原理：就是用js把所有設備的viewport設置成一樣的
3.rem適配
1rem=根節點的字體大小
動態設置根節點的字體大小
8.了解（meta）
頁面描述
頁面關鍵詞
為移動設備添加 viewport
百度禁止轉碼
禁止數字自動識別為電話號碼
禁止自動自動識別地址
禁止自動自動識別日期
關閉電話號碼的自動識別：
開啟電話功能
開啟短信功能：
禁止自動自動識別 Email
郵箱的自動識別：
同樣地，我們也可以通過標簽屬性來開啟長按郵箱地址彈出郵件發送的功能：
還有一種情況，在IE8下只有不使用兼容模式頁面才能顯示正常，但是如果設定為IE8的模式，在IE9中卻會導致CSS3失效。看來，需要針對 IE8、IE9 分別 禁用兼容模式。怎么辦呢？可以在后臺判斷瀏覽器版本，如果是 IE8就輸出content="IE=8"，如果是IE9就輸出 content="IE=9"。其實還可以單純通過HTML來實現的，HTML代碼如下：
9.彈性盒子
1. box-sizing:border-box/ (沒有繼承) 給自己加
效果，壓邊框到盒子里
padding-box/content-box 沒用
chrome51：padding-box不好使
FF47： padding-box好使
盒模型:width+padding+border
border-box: width代碼：box-sizing*{margin:0;padding:0;? }.box{width:100%;height:100px;background: cornflowerblue;border:10pxsolid#000;padding:010px;box-sizing: border-box;? ? }nav{height:100px;margin-top:50px;background:#f60;width:100%;? ? }navul{width:100%;display:-webkit-box;? ? }.nav1{-webkit-box-direction:reverse;/*翻轉*/}navulli{height:100px;-webkit-box-flex:1;list-style: none;background:aqua;? ? }.ben{width:100px;height:500px;background: red;display:-webkit-box;? ? }.benli{list-style: none;-webkit-box-flex:1;? ? }aaaaaa--box-sizing:border-box; 對border和padding都有效果，? ? ? ? 都會壓進去（沒有繼承）給自己加。ie8+，chrome，ff。其他兩個值不好用，? ? ? ? padding-box在chrome5.1不好用ff47好用
1
2
3
4
5
1
2
3
4
5
內陰影：m
box-shadow:inset 0 2px 2px #ccc;
彈性盒子：
父級：
display:-webkit-box;
-webkit-box-orient:vertical; 豎直方向-webkit-box-direction:reverse; 翻轉-webkit-box-pack:center; 水平居中start/end-webkit-box-align:center; 垂直居中start/end
子級：
-webkit-box-flex:1;
1:占幾份
{margin: 0; padding: 0;}
div{
width: 200px;
height: 500px;
}
ul{
-webkit-box-orient:vertical; /豎直方向*/
}
ul li{
-webkit-box-flex:1;
list-style: none;
background: red;
margin: 20px 0;
}
1
1
1
1
1
bootstrap常用的東西自己下去了解
