移動(dòng)端復(fù)習(xí)
一哀九、下面我將簡(jiǎn)單的介紹移動(dòng)端布局的八種方式：
** 1.固定布局**
2.流動(dòng)布局
3.浮動(dòng)布局
4.定位布局
5.混合布局
6.flex布局
7.rem布局
8.響應(yīng)式布局
** 9.****圣杯布局**
** 10.****雙飛翼布局**
1.固定布局 方法 <head>里把<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">加好悔捶，然后根據(jù)設(shè)計(jì)稿設(shè)定相應(yīng)的寬度即可，其他地方類似于pc端考抄。 優(yōu)點(diǎn) 思路沿用pc端，上手比較快 缺點(diǎn)
大屏手機(jī)顯示網(wǎng)頁(yè)比較寬蔗彤，而固定布局寬度參照永遠(yuǎn)是固定的寬度（設(shè)計(jì)稿的大写贰）疯兼，導(dǎo)致左右兩邊會(huì)有空白。手機(jī)橫屏的時(shí)候兩邊空白更亮贫途。
2.流動(dòng)布局
方法
適用百分比(%)做單位吧彪。
優(yōu)點(diǎn) 能更很好的適應(yīng)各個(gè)屏幕分辨率的手機(jī)。 缺點(diǎn)
不夠靈活丢早，添加元素時(shí)姨裸，需要更改其他元素的值。
3.浮動(dòng)布局 方法
float+clearfix(清除浮動(dòng))
/--不需兼容老版本--/
.clearfix:after{
content:"";
display:block;
clear:both;
}
--需要兼容老版本--/
clearfix:after{
content:"";
display:block;
clear:both;
height:0;
visibility:hidden;
}
**優(yōu)點(diǎn)** 這是傳統(tǒng)的浮動(dòng)方式怨酝，寫法簡(jiǎn)單傀缩，實(shí)現(xiàn)效果起來(lái)干脆利落 **缺點(diǎn)**
對(duì)浮動(dòng)元素要求比較嚴(yán)格，布局也不太靈活
4.定位布局 方法 在布局當(dāng)中很常用农猬，利用position+四個(gè)方位的具體值（top/left/right/bottom）相互配合赡艰，實(shí)現(xiàn)起來(lái)也比較容易 優(yōu)點(diǎn)
實(shí)現(xiàn)簡(jiǎn)單，在移動(dòng)端中斤葱，定位很常用慷垮，尤其是彈窗，
.mask{
position:fixed;
left:50%;
top:50%;
-webkit-transform:translate3d(-50%,-50%,0);
transform:translate3d(-50%,-50%,0);
}
缺點(diǎn)
移動(dòng)端中頻繁的使用定位苦掘，會(huì)出現(xiàn)一些莫名的bug;
fixed+input在ios上存在bug,會(huì)出現(xiàn)使用fixed布局的元素亂掉换帜。在android手機(jī)上當(dāng)input框獲取焦點(diǎn)時(shí)，換氣鍵盤鹤啡，會(huì)出現(xiàn)定位的元素被抬升至手機(jī)鍵盤的上方惯驼。（了解）
5.混合布局 方法 所謂混合布局，就是把所有學(xué)到的知識(shí)靈活運(yùn)用在布局中递瑰。例如：rem+百分比(流動(dòng)布局) flex+rem等 優(yōu)點(diǎn) 布局靈活祟牲，集合其他布局的優(yōu)勢(shì)達(dá)到自己的布局要求 缺點(diǎn)
代碼有點(diǎn)累贅；代碼不統(tǒng)一抖部，維護(hù)困難
6.flex布局(重點(diǎn))
方法
也叫彈性布局说贝。
/--只需父元素設(shè)置--/
{
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/
}
/--然后子元素設(shè)置相應(yīng)的比例--/
{
-webkit-box-flex:1;
-webkit-flex:1;
-ms-flex:1;
flex:1;
}
這個(gè)是最簡(jiǎn)單的flex布局了，其實(shí)彈性布局里面還有很多簡(jiǎn)單高效實(shí)用的屬性慎颗，很方便移動(dòng)端的布局乡恕。 **優(yōu)點(diǎn)** 自適應(yīng)很好，靈活性很強(qiáng)俯萎，目前在移動(dòng)端應(yīng)用的還是比較廣泛傲宜。 **缺點(diǎn)**
需要寫很多兼容代碼。
7.rem布局 方法 rem是通過(guò)根元素進(jìn)行適配的夫啊，網(wǎng)頁(yè)中的根元素指的是html我們通過(guò)設(shè)置html的font-size大小就可以控制rem的大小函卒。有以下兩種適配方式：
1.rem+@media(通過(guò)媒體查詢?cè)O(shè)置html的font-size值，達(dá)到自適應(yīng))
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（通過(guò)js自動(dòng)獲取設(shè)備寬度撇眯，計(jì)算得到相應(yīng)設(shè)備下html的font-size值達(dá)到自適應(yīng)）（了解）
!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);
優(yōu)點(diǎn) 在任何設(shè)備下都可以達(dá)到完全適配报嵌，頁(yè)面布局樣式完全自適應(yīng) 缺點(diǎn)
rem+@media這種方式不能所有設(shè)備全適配
8.響應(yīng)式布局 方法 使用@media(媒體查詢)設(shè)置頁(yè)面在不同的屏幕寬度下達(dá)到自適應(yīng)以及響應(yīng)式（根據(jù)不同屏幕大小虱咧，頁(yè)面布局，樣式會(huì)做出相應(yīng)的調(diào)整）典型案例（bootStrap官網(wǎng)） 優(yōu)點(diǎn) 不僅在不同的屏幕下達(dá)到自適應(yīng)锚国，還會(huì)在相應(yīng)的屏幕下對(duì)頁(yè)面布局腕巡，樣式做出相應(yīng)的調(diào)整，達(dá)到更加的用戶體驗(yàn) 缺點(diǎn)
兼容各種設(shè)備工作量大跷叉，效率低下逸雹；代碼累贅，會(huì)出現(xiàn)隱藏?zé)o用的元素云挟，加載時(shí)間過(guò)長(zhǎng)梆砸；一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會(huì)出現(xiàn)用戶混淆的情況园欣；增加UI和開發(fā)的工作量帖世。
9.圣杯布局
利用float來(lái)實(shí)現(xiàn)，首先將三列放到一個(gè)父元素內(nèi)后左浮動(dòng)沸枯，之后給左右中分別設(shè)置寬度200px,250px,100%日矫。
之后給中間，右邊分別設(shè)置margin-left為-200px,-250px绑榴。之后再將左右兩列進(jìn)行相對(duì)定位position：relative;并分別設(shè)置left:-200px;right:-250px;最后便是等高布局了哪轿，給左中右設(shè)置padding-bottom:2000px;margin-bottom:-2000px;給其父元素設(shè)置overflow:hidden即可。
[圖片上傳中翔怎。窃诉。。（1）]
10.雙飛翼布局
用float來(lái)實(shí)現(xiàn)赤套，首先將左中右分別設(shè)置寬度為200px,100%,250px飘痛。中右分別設(shè)置margin-left為-200px和-250px.中間元素下有一個(gè)子元素，設(shè)置margin-left和margin-right分別為200px余250px容握。最后便是等高布局了宣脉，給左中右設(shè)置padding-bottom:2000px;margin-bottom:-2000px;給其父元素設(shè)置overflow:hidden即可。
[圖片上傳中剔氏。塑猖。。（2）]
[圖片上傳中谈跛。羊苟。。（3）]
二币旧、雜貨
**手機(jī)端字體標(biāo)準(zhǔn) ** font-family: Helvetica, "Microsoft Yahei", "Heiti SC", "Droid Sans", "Droidsansfallback", SimSun, sans-serif;
1.觸摸事件touch
touchstart 手指放在屏幕上觸發(fā)
touchmove 手指在屏幕上移動(dòng)践险，連續(xù)觸發(fā)
touchend 手指離開屏幕觸發(fā)
touchcancel 當(dāng)系統(tǒng)停止跟蹤時(shí)觸發(fā)猿妈，當(dāng)一些更高級(jí)別的事件發(fā)生的時(shí)候（如電話接入或者彈出信息）會(huì)取消當(dāng)前的touch操作吹菱，即觸發(fā)ontouchcancel巍虫。一般會(huì)在ontouchcancel時(shí)暫停游戲、存檔等操作鳍刷。
注意：
移動(dòng)端的事件會(huì)觸發(fā)瀏覽器的默認(rèn)行為占遥，所以在調(diào)用事件的時(shí)候要把默認(rèn)行為阻止了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='手指移動(dòng)了';
});
box.addEventListener('touchend',function(){
this.innerHTML='手指離開了';
});
2.touch事件對(duì)象
ev.touches 當(dāng)前屏幕的手指列表
ev.targetTouches 當(dāng)前元素上的手指列表
ev.changedTouches 觸發(fā)當(dāng)前事件的手指列表
每個(gè)touch對(duì)象都包含了以下幾個(gè)屬性（打印ev.touches如下）：
[圖片上傳中输瓜。瓦胎。。（4）]
clientX //觸摸目標(biāo)在視口中的X坐標(biāo)尤揣。 clientY //觸摸目標(biāo)在視口中的Y坐標(biāo)搔啊。 Identifier //標(biāo)示觸摸的唯一ID。 pageX //觸摸目標(biāo)在頁(yè)面中的X坐標(biāo)北戏。 pageY //觸摸目標(biāo)在頁(yè)面中的Y坐標(biāo)负芋。 screenX//觸摸目標(biāo)在屏幕中的X坐標(biāo)。 screenY //觸摸目標(biāo)在屏幕中的Y坐標(biāo)嗜愈。
target // 觸摸的DOM節(jié)點(diǎn)目標(biāo)旧蛾。
代碼：
var box=document.getElementById("box");
//相當(dāng)于mousedown
box.addEventListener('touchstart',function(ev){
//console.log(ev.touches);
this.innerHTML=ev.touches.length;//按下手指數(shù)
});
3.設(shè)備加速度事件devicemotion(了解：知道有這么個(gè)東西，面試移動(dòng)端時(shí)項(xiàng)目會(huì)問(wèn)到)
devicemotion 封裝了運(yùn)動(dòng)傳感器數(shù)據(jù)的事件蠕嫁，可以獲取手機(jī)運(yùn)動(dòng)狀態(tài)下的運(yùn)動(dòng)加速度等數(shù)據(jù)锨天。
其中加速度的數(shù)據(jù)包含以下三個(gè)方向：
x：橫向貫穿手機(jī)屏幕；
y：縱向貫穿手機(jī)屏幕剃毒；
z：垂直手機(jī)屏幕
[圖片上傳中病袄。。迟赃。（5）]
鑒于有些設(shè)備沒(méi)有排除重力的影響陪拘，所以該事件會(huì)返回兩個(gè)屬性：
1、accelerationIncludingGravity(含重力的加速度)
2纤壁、acceleration(排除重力影響的加速度)
注意：這個(gè)事件只能放在window身上
demo1:顯示重力加速度的值
代碼：
window.addEventListener('devicemotion',function(ev){
var motion=ev.accelerationIncludingGravity;
box.innerHTML='x:'+motion.x+'
'+'y:'+motion.y+'
'+'z:'+motion.z;
});
demo2:方塊跟著重力左右移動(dòng)
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:搖一搖應(yīng)用原理
var box=document.getElementById('box');
var lastRange=0; //上一次搖晃的幅度
var isShake=false; //決定用戶到底有沒(méi)有大幅度搖晃
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);
var range=x+y+z; //當(dāng)前搖晃的幅度
if(range-lastRange>100){
//這個(gè)條件成立說(shuō)明用戶現(xiàn)在已經(jīng)在大幅度搖晃
isShake=true;
}
if(isShake && range<50){
//這個(gè)條件成立左刽，說(shuō)明用戶搖晃的幅度很小了就要停了
box.innerHTML='搖晃了';
isShake=false;
}
});
4.media
min-width: 當(dāng)屏幕大小 大于等于 某個(gè)值的時(shí)候識(shí)別 max-width: 當(dāng)屏幕大小 小于等于 某個(gè)值的時(shí)候識(shí)別
關(guān)鍵字：and only not
@media all and (min-width: 500px) {
#box{
background-color: green;
}
}
5.引入方式
1.<link rel="stylesheet" href="01.css" media="all and (min-width:400px)"/> 2.@import url(01.css) (min-width:400px); 3.@media all and (min-width: 500px) { #box{ background-color: green; }
}
6.關(guān)于bootstrap
1.柵格化系統(tǒng) ：將一行分為12列
容器：
container
固定寬度
container-fluid
百分比寬度
行：row
列：lg 大屏幕 大桌面顯示器 (≥1200px)
md 中等屏幕 桌面顯示器 (≥992px)
sm 小屏幕 平板 (≥768px)
xs 超小屏幕 手機(jī) (<768px)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no"/>
<title></title>
<link rel="stylesheet" type="text/css" href="bs/css/bootstrap.min.css"/>
<style>
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;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
</div>
</div>
</body>
</html>
2.col-md-offset-設(shè)置列偏移
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-md-offset-1">1</div>
<div class="col-md-2 col-md-offset-4">2</div>
</div>
</div>
3..col-md-push-(往后) 和 .col-md-pull-*（往前） 列排序4. hidden-xs 超小屏幕消失
visible-xs 超小屏幕顯示
7.移動(dòng)端適配
1.百分比適配
弊端：height無(wú)法設(shè)置
2.viewport 適配
原理：就是用js把所有設(shè)備的viewport設(shè)置成一樣的
3.rem適配
1rem=根節(jié)點(diǎn)的字體大小
動(dòng)態(tài)設(shè)置根節(jié)點(diǎn)的字體大小
8.了解（meta）
頁(yè)面描述
<meta name="description" content="不超過(guò)150個(gè)字符" />
頁(yè)面關(guān)鍵詞
<meta name="keywords" content="html5, css3, 關(guān)鍵字"/>
為移動(dòng)設(shè)備添加 viewport
<meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
百度禁止轉(zhuǎn)碼
<meta http-equiv="Cache-Control" content="no-siteapp" />
禁止數(shù)字自動(dòng)識(shí)別為電話號(hào)碼
<meta name="format-detection" content="telephone=no">
禁止自動(dòng)自動(dòng)識(shí)別地址
<meta name="format-detection" content="address=no">
禁止自動(dòng)自動(dòng)識(shí)別日期
<meta name="format-detection" content="date=no">
關(guān)閉電話號(hào)碼的自動(dòng)識(shí)別：
<meta name="format-detection" content="telephone=no" />
開啟電話功能
<a href="tel:123456">123456</a>
開啟短信功能：
<a href="sms:123456">123456</a>
禁止自動(dòng)自動(dòng)識(shí)別 Email
<meta name="format-detection" content="email=no">
郵箱的自動(dòng)識(shí)別：
<meta content="email=no" name="format-detection" />
同樣地，我們也可以通過(guò)標(biāo)簽屬性來(lái)開啟長(zhǎng)按郵箱地址彈出郵件發(fā)送的功能：
<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>
<metahttp-equiv="X-UA-Compatible"content="IE=8">
<metahttp-equiv="X-UA-Compatible"content="IE=7">
還有一種情況酌媒，在IE8下只有不使用兼容模式頁(yè)面才能顯示正常欠痴，但是如果設(shè)定為IE8的模式，在IE9中卻會(huì)導(dǎo)致CSS3失效秒咨±桑看來(lái)，需要針對(duì) IE8雨席、IE9 分別 禁用兼容模式菩咨。怎么辦呢？可以在后臺(tái)判斷瀏覽器版本，如果是 IE8就輸出content="IE=8"抽米，如果是IE9就輸出 content="IE=9"特占。其實(shí)還可以單純通過(guò)HTML來(lái)實(shí)現(xiàn)的，HTML代碼如下：
<metahttp-equiv="X-UA-Compatible"content="IE=9; IE=8; IE=7; IE=EDGE">
9.彈性盒子
** ** 1. box-sizing:border-box/ (沒(méi)有繼承) 給自己加
效果云茸，壓邊框到盒子里
padding-box/content-box 沒(méi)用
chrome51：padding-box不好使
FF47： padding-box好使
盒模型:width+padding+border
border-box: width
代碼：
<html>
<head>
<title>box-sizing</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 100%;
height: 100px;
background: cornflowerblue;
border:10px solid #000;
padding: 0 10px;
box-sizing: border-box;
}
nav{
height: 100px;
margin-top: 50px;
background: #f60;
width: 100%;
}
nav ul{
width: 100%;
display:-webkit-box;
}
.nav1{
-webkit-box-direction:reverse;/*翻轉(zhuǎn)*/
}
nav ul li{
height: 100px;
-webkit-box-flex:1;
list-style: none;
background:aqua;
}
.ben{
width: 100px;
height: 500px;
background: red;
display:-webkit-box;
}
.ben li{
list-style: none;
-webkit-box-flex:1;
}
</style>
<body>
<div class="box">aaaaaa--box-sizing:border-box; 對(duì)border和padding都有效果是目，
都會(huì)壓進(jìn)去（沒(méi)有繼承）給自己加。ie8+标捺，chrome懊纳，ff。其他兩個(gè)值不好用亡容，
padding-box在chrome5.1不好用ff47好用</div>
<nav class="nav">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</nav>
<nav class="nav1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</nav>
</body>
</html>
內(nèi)陰影：m
box-shadow:inset 0 2px 2px #ccc;
彈性盒子：
父級(jí)：
display:-webkit-box;
-webkit-box-orient:vertical; 豎直方向
-webkit-box-direction:reverse; 翻轉(zhuǎn)
-webkit-box-pack:center; 水平居中
start/end
-webkit-box-align:center; 垂直居中
start/end
子級(jí)：
-webkit-box-flex:1;
1:占幾份
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
{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;
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</body>
</html>
** bootstrap常用的東西自己下去了解**
** ** [圖片上傳中嗤疯。。闺兢。（6）] [圖片上傳中身弊。。列敲。（7）] [圖片上傳中阱佛。。戴而。（8）] [圖片上傳中凑术。。所意。（9）] [圖片上傳中淮逊。。扶踊。（10）] [圖片上傳中泄鹏。。秧耗。（11）] [圖片上傳中备籽。。分井。（12）] [圖片上傳中车猬。。尺锚。（13）] [圖片上傳中珠闰。。瘫辩。（14）] [圖片上傳中伏嗜。坛悉。。（15）]
