一、流式布局
1.1 什么是流式布局
流式布局就是百分比布局，通過盒子的寬度設置成百分比來根據(jù)屏幕的寬度來進行伸縮，不受固定像素的限制，內(nèi)容向兩側(cè)填充，同時會設定最小寬度和最大寬度，適用于圖片比較多的首頁、門戶、電商等。
在這里我們以京東的M站為例進行說明：
可以看到，在京東各個模塊的主容器中，都設置了最大最小寬度和寬度100%，而在導航區(qū)塊中，由于一行有5個小區(qū)塊，所以設置了寬度為20%，使得小區(qū)塊也能達到自適應的效果。
1.2 viewport
在移動端用來承載網(wǎng)頁的這個區(qū)域就是我們的視覺窗口
viewport，這個區(qū)域可以設置高度寬度，可以按比例放大縮小，而且能設置是否允許用戶自行縮放。
-
width：設置的是
viewport寬度，可以設置device-width特殊值。 - initial-scale：初始縮放比，大于0的數(shù)字，一般設置為1.0。
- maximum-scale：最大縮放比，大于0的數(shù)字。
- minimum-scale：最小縮放比，大于0的數(shù)字。
- user-scalable：用戶是否可以縮放，yes或no（1或0）。
<!--視口標簽通可以使用 meta:vp + tab 來快速生成，通常我們可以設置為下邊這樣。-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>
1.3 移動端常見事件
1.3.1 touch事件
- touchstart：當手指觸碰屏幕時候發(fā)生。不管當前有多少只手指。
-
touchmove：當手指在屏幕上滑動時連續(xù)觸發(fā)。通常我們再滑屏頁面，會調(diào)用
event的preventDefault()可以阻止默認情況的發(fā)生：阻止頁面滾動。 - touchend：當手指離開屏幕時觸發(fā)。
-
touchcancel：系統(tǒng)停止跟蹤觸摸時候會觸發(fā)。例如在觸摸過程中突然頁面
alert()一個提示框，此時會觸發(fā)該事件，這個事件比較少用。
觸摸事件的響應順序：
ontouchstart --> ontouchmove --> ontouchend --> onclick(300ms延時)。
1.3.2 event事件
-
originalEvent：（原生事件）是
jquery封裝的事件。? - targetTouches：目標元素的所有當前觸摸。
- changedTouches：頁面上最新更改的所有觸摸。
-
touches：頁面上的所有觸摸。注意：在
touchend事件的時候event只會記錄changedtouches。
二、響應式開發(fā)
2.1 響應式開發(fā)簡介
2.1.1 什么是響應式開發(fā)
在移動互聯(lián)日益成熟的時候，我們在桌面瀏覽器上開發(fā)的網(wǎng)頁已經(jīng)無法滿足移動設備的閱讀。
通常的做法是針對移動端單獨做一套特定的版本。
但是如果終端越來越多那么你需要開發(fā)的版本就會越來越多（大屏移動設備普及）。
那么
Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網(wǎng)站能夠兼容多個終端。
2.1.2 響應式開發(fā)的前景
現(xiàn)在的移動設備屏幕越來越大。
越來越多的設計師也采用了這種設計。
在新建站的一些網(wǎng)站現(xiàn)在普遍采用的響應式開發(fā)。
那么在前端開發(fā)當中也是一項必備的技能。
2.1.3 響應式開發(fā)的原理
CSS3中的
Media Query（媒介查詢），通過查詢screen的寬度來指定某個寬度區(qū)間的網(wǎng)頁布局。
- 超小屏幕：768px以下（移動設備）。
- 小屏設備：768px-992px。
- 中等屏幕：992px-1200px。
- 寬屏設備：1200px以上。
2.2 Bootstrap框架
2.2.1 Bootstrap簡介
- 官方網(wǎng)站
- Bootstrap中文網(wǎng)
- 它是由
Twitter的設計師Mark Otto和Jacob Thornton合作開發(fā)，是一個CSS/HTML框架。它提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動態(tài)CSS語言Less寫成。 -
Bootstrap是基于HTML5和CSS3開發(fā)的，它在jQuery的基礎上進行了更為個性化和人性化的完善，形成一套自己獨有的網(wǎng)站風格，并兼容大部分jQuery插件。 -
Bootstrap中包含了豐富的Web組件，根據(jù)這些組件，可以快速的搭建一個漂亮、功能完備的網(wǎng)站。其中包括以下組件：下拉菜單、按鈕組、按鈕下拉菜單、導航、導航條、路徑導航、分頁、排版、縮略圖、警告對話框、進度條、媒體對象等。
2.2.2 Bootstrap常用樣式
-
container類：用于定義一個固定寬度且居中的版心。
<div class="topbar"> <div class="container"> <!-- 此處的代碼會顯示在一個固定寬度且居中的容器中 該容器的寬度會跟隨屏幕的變化而變化 --> </div> </div> -
柵格系統(tǒng)：
Bootstrap中定義了一套響應式的網(wǎng)格系統(tǒng)，其使用方式就是將一個容器劃分成12列，然后通過col-xx-xx的類名控制每一列的占比。-
row類：
- 因為每一個列默認有一個15px的左右外邊距。
-
row類的一個作用就是通過左右-15px屏蔽掉這個邊距。
<div class="container"> <div class="row"></div> </div> -
col-xx-x類：
- 第一個連接符后邊寫屏幕尺寸，有
xs超小屏幕 手機(<768px)、sm小屏幕 平板 (≥768px)、md中等屏幕 桌面顯示器(≥992px)、lg大屏幕 大桌面顯示器 (≥1200px)四種。 - 第二個連接符后邊表示對應的份數(shù)，占12份中的幾份。
<div class="row"> <div class="col-md-2 text-center"></div> <div class="col-md-5 text-center"></div> <div class="col-md-2 text-center"></div> <div class="col-md-3 text-center"></div> </div> - 第一個連接符后邊寫屏幕尺寸，有
-
-
hidden類：設置在不同的屏幕下隱藏。
<div class="hidden-xs,hidden-sm,hidden-md,hidden-lg"> </div> -
text-xx類：設置文字的對齊方式。
text-center 文本居中 text-left 文本左對齊 text-right 文本右對齊 -
pull-xx類：設置浮動。
pull-left 左浮動類 pull-right 右浮動類 center-block類：讓一個固定寬度的元素居中。
2.2.3 字體圖標
-
字體圖標：
@font-face { font-family: 'XXX'; src: url('../font/MiFie-Web-Font.eot') format('embedded-opentype'), url('../font/MiFie-Web-Font.svg') format('svg'), url('../font/MiFie-Web-Font.ttf') format('truetype'), url('../font/MiFie-Web-Font.woff') format('woff'); } -
字體文件格式：
-
eot：embedded-opentype -
svg：svg -
ttf：truetype -
woff：woff
-
2.2.4 輪播圖插件 Carousel
-
基本的輪播圖實現(xiàn)：
<!-- 以下容器就是整個輪播圖組件的整體， 注意該盒子必須加上 class="carousel slide" data-ride="carousel" 表示當前是一個輪播圖 bootstrap.js會自動為當前元 素添加圖片輪播的特效 --> <div id="輪播圖的ID" class="carousel slide" data-ride="carousel"> <!-- ol標簽是圖片輪播的控制點 --> <ol class="carousel-indicators"> <!-- 每一個li就是一個單獨的控制點 data-target屬性就是指定當前控制點控制的是哪一個輪播圖，其目的是如果界面上有多個輪播圖，便于區(qū)分到底控制哪一個 data-slide-to屬性是指當前的li元素綁定的是第幾個輪播項 注意，默認必須給其中某個li加上active，展示的時候就是焦點項目 --> <li data-target="#輪播圖的ID" data-slide-to="0" class="active"></li> <li data-target="#輪播圖的ID" data-slide-to="1"></li> <!-- ...更多的 --> </ol> <!-- .carousel-inner是所有輪播項的容器盒子， 注意role="listbox"代表當前div是一個列表盒子，作用就是給當前div添加一個語義 --> <div class="carousel-inner" role="listbox"> <!-- 每一個.item就是單個輪播項目，注意默認要給第一個輪播項目加上active，表示為焦點 --> <div class="item active"> <!-- 輪播項目中展示的圖片 -->  <div class="carousel-caption"> <!-- 標題或說明性文字，如果不需要，直接刪除當前div.carousel-caption --> </div> </div> <div class="item"> <!-- ... --> </div> <!-- ... --> </div> <!-- 圖片輪播上左右兩個控制按鈕，分別點擊可以滾動到上一張和下一張 --> <!-- 此處需要注意的是 該a鏈接的href屬性必須指向需要控制的輪播圖ID --> <!-- 另外a鏈接中的data-slide="prev"代表點擊該鏈接會滾到上一張，如果設置為next的話則相反 --> <a class="left carousel-control" href="#輪播圖的ID" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">上一張</span> </a> <a class="right carousel-control" href="#輪播圖的ID" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">下一張</span> </a> </div>
2.2.5 函數(shù)庫 underscoreJS
-
_.template：<ol class="carousel-indicators"> <!--渲染的HTML字符串--> </ol> <div class="carousel-inner" role="listbox"> <!--渲染的HTML字符串--> </div>/*取到模版當中的字符串*/ var pointTemplateStr = $('#point_template').html(); var imageTemplateStr = $('#image_template').html(); /*轉(zhuǎn)化成模版函數(shù)*/ var pointTemplate = _.template(pointTemplateStr); var imageTemplate = _.template(imageTemplateStr); /*傳入數(shù)據(jù) 解析成 html 字符*/ var pointHtml = pointTemplate({model:data}); var imageHtml = imageTemplate({model:data,isMobile:isMobile});//我們只需要再加一個屬性 /*把html字符串渲染在頁面當中*/ $('.carousel-indicators').html(pointHtml); $('.carousel-inner').html(imageHtml);<!--點模版--> <script type="text/template" id="point_template"> <%_.each(model,function(obj,i){%> <li data-target="#carousel-example-generic" data-slide-to="<%=i%>" class="<%=(i==0?'active':'')%>"></li> <%})%> </script> <!--圖片模版--> <script type="text/template" id="image_template"> <%_.each(model,function(obj,i){%> <div class="item <%=(i==0?'active':'')%>"> <% if(isMobile){ %> <a href="#" class="m_imgBox"> <img src="<%=obj.img%>" alt=""/> </a> <%} else {%> <a href="#" class="pc_imgBox" style="background-image:url(<%=obj.bac%>)"></a> <%}%> </div> <%})%> </script>
三、rem布局
準備編輯這段時發(fā)現(xiàn)簡書上已經(jīng)有作者寫了關于rem布局的介紹，并且他的設置比我所用的更加簡潔，貼上地址供大家學習參考。
手機端頁面自適應解決方案—rem布局進階版（附源碼示例）
四、移動web開發(fā)中的常見問題
4.1 移動端如何定義字體font-family?
三大手機系統(tǒng)的字體：?
-
iOS 系統(tǒng)：
- 默認中文字體是
Heiti SC - 默認英文字體是
Helvetica - 默認數(shù)字字體是
HelveticaNeue - 無微軟雅黑字體
- 默認中文字體是
-
Android 系統(tǒng)：
- 默認中文字體是
Droidsansfallback - 默認英文和數(shù)字字體是
Droid Sans? - 無微軟雅黑字體
- 默認中文字體是
-
Winphone 系統(tǒng)：
- 默認中文字體是
Dengxian(方正等線體) - 默認英文和數(shù)字字體是
Segoeod - 無微軟雅黑字體
- 默認中文字體是
各個手機系統(tǒng)有自己的默認字體，且都不支持微軟雅黑，如無特殊需求，手機端無需定義中文字體，使用系統(tǒng)默認英文字體和數(shù)字字體可使用Helvetica，三種系統(tǒng)都支持。
/* 移動端定義字體的代碼 */
body{
font-family:Helvetica;
}
4.2 移動端字體單位font-size選擇px還是rem?
對于只需要適配手機設備，使用
px即可。對于需要適配各種移動設備，使用
rem，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設備。-
rem配置參考：html {font-size:10px} @media screen and (min-width:480px) and (max-width:639px) { html { font-size: 15px } } @media screen and (min-width:640px) and (max-width:719px) { html { font-size: 20px } } @media screen and (min-width:720px) and (max-width:749px) { html { font-size: 22.5px } } @media screen and (min-width:750px) and (max-width:799px) { html { font-size: 23.5px } } @media screen and (min-width:800px) and (max-width:959px) { html { font-size: 25px } } @media screen and (min-width:960px) and (max-width:1079px) { html { font-size: 30px } } @media screen and (min-width:1080px) { html { font-size: 32px } }
4.3 移動端touch事件(區(qū)分webkit和winphone)有哪些？
當用戶手指放在移動設備在屏幕上滑動會觸發(fā)的touch事件：
-
以下支持webkit：
-
touchstart——當手指觸碰屏幕時候發(fā)生。不管當前有多少只手指。 -
touchmove——當手指在屏幕上滑動時連續(xù)觸發(fā)。通常我們再滑屏頁面，會調(diào)用event``preventDefault()可以阻止默認情況的發(fā)生：阻止頁面滾動。 -
touchend——當手指離開屏幕時觸發(fā)。 -
touchcancel——系統(tǒng)停止跟蹤觸摸時候會觸發(fā)。例如在觸摸過程中突然頁面alert()一個提示框，此時會觸發(fā)該事件，這個事件比較少用。
-
-
以下支持winphone 8：
-
MSPointerDown——當手指觸碰屏幕時候發(fā)生。不管當前有多少只手指。 -
MSPointerMove——當手指在屏幕上滑動時連續(xù)觸發(fā)。通常我們再滑屏頁面，會調(diào)用css的html{-ms-touch-action:none;}可以阻止默認情況的發(fā)生：阻止頁面滾動。 -
MSPointerUp——當手指離開屏幕時觸發(fā)。
-
4.4 如何解決移動端click屏幕產(chǎn)生200-300ms的延遲響應問題？
移動設備上的web網(wǎng)頁是有300ms延遲的，往往會造成按鈕點擊延遲甚至是點擊失效。
解決方案：
-
fastclick可以解決在手機上點擊事件的300ms延遲。 -
zepto的touch模塊，tap事件也是為了解決在click的延遲問題。
觸摸事件的響應順序：
ontouchstartontouchmoveontouchendonclick
解決300ms延遲的問題，也可以通過綁定ontouchstart事件，加快對事件的響應。
4.5 什么是Retina 顯示屏，帶來了什么問題？
retina：一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由1個變?yōu)槎鄠€，如在同樣帶下的屏幕上，蘋果設備的retina顯示屏中，像素點1個變?yōu)?個。
在高清顯示屏中的位圖被放大，圖片會變得模糊，因此移動端的視覺稿通常會設計為傳統(tǒng)PC的2倍。
那么，前端的應對方案是：
設計稿切出來的圖片長寬保證為偶數(shù)，并使用backgroud-size把圖片縮小為原來的1/2。
//例如圖片寬高為：200px*200px，那么寫法如下
.css{width:100px;height:100px;background-size:100px 100px;}
其它元素的取值為原來的1/2，例如視覺稿40px的字體，使用樣式的寫法為20px。
.css{font-size:20px}
4.6 移動端如何取消touch高亮效果？
在做移動端頁面時，會發(fā)現(xiàn)所有a標簽在觸發(fā)點擊時或者所有設置了偽類:active的元素，默認都會在激活狀態(tài)時，顯示高亮框，如果不想要這個高亮，那么你可以通過css以下方法來進行全局的禁止：
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
-
ios用戶點擊一個鏈接，會出現(xiàn)一個半透明灰色遮罩, 如果想要禁用，可設置-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最后一位設置為0就可以去除半透明灰色遮罩。a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)} -
android用戶點擊一個鏈接，會出現(xiàn)一個邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來額效果不一樣，可設置-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果。a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0;) -webkit-user-modify:read-write-plaintext-only; }-webkit-user-modify有個副作用，就是輸入法不再能夠輸入多個字符。另外，有些機型去除不了，如小米2。對于此類問題還有個辦法，不使用
a或者input標簽，直接用div標簽。 -
winphone系統(tǒng)a、input標簽被點擊時產(chǎn)生的半透明灰色背景怎么去掉？<meta name="msapplication-tap-highlight" content="no">
4.7 關于webkit表單的幾個問題
-
webkit表單元素的默認外觀怎么重置？.css{-webkit-appearance:none;} -
webkit表單輸入框placeholder的顏色值能改變么？input::-webkit-input-placeholder{color:#AAAAAA;} input:focus::-webkit-input-placeholder{color:#EEE} -
webkit表單輸入框placeholder的文字能換行么？iOS可以，Android不行。 -
如何禁止文本縮放?？
當移動設備橫豎屏切換時，文本的大小會重新計算，進行相應的縮放，當我們不需要這種情況時，可以選擇禁止：
html { -webkit-text-size-adjust: 100%; }需要注意的是，PC端的該屬性已經(jīng)被移除，該屬性在移動端要生效，必須設置
meta viewport。
4.8 如何在移動端禁止用戶選中內(nèi)容？
如果你不想用戶可以選中頁面中的內(nèi)容，那么你可以在css中禁掉：
.user-select-none {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all （移動端不需要） */
-ms-user-select: none; /* IE 10+ */
}
4.9 如何模擬按鈕的hover效果？
移動端觸摸按鈕的效果，可明示用戶有些事情正要發(fā)生，是一個比較好體驗，但是移動設備中并沒有鼠標指針，使用css的hover并不能滿足我們的需求，還好國外有個激活css的active效果，代碼如下：
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style type="text/css">
a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
.btn-blue:active{background-color: #357AE8;}
</style>
</head>
<body>
<div class="btn-blue">按鈕</div>
<script type="text/javascript">
document.addEventListener("touchstart", function(){}, true)
</script>
</body>
</html>
兼容性ios5+、部分android 4+、winphone 8
要做到全兼容的辦法，可通過綁定ontouchstart和ontouchend來控制按鈕的類名。
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style type="text/css">
a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
.btn-blue-on{background-color: #357AE8;}
</style>
</head>
<body>
<div class="btn-blue">按鈕</div>
<script type="text/javascript">
var btnBlue = document.querySelector(".btn-blue");
btnBlue.ontouchstart = function(){
this.className = "btn-blue btn-blue-on"
}
btnBlue.ontouchend = function(){
this.className = "btn-blue"
}
</script>
</body>
</html>
4.10 屏幕旋轉(zhuǎn)的事件和樣式
-
事件：
window.orientation，取值：正負90表示橫屏模式、0和180表現(xiàn)為豎屏模式。window.onorientationchange = function(){ switch(window.orientation){ case -90: case 90: alert("橫屏:" + window.orientation); case 0: case 180: alert("豎屏:" + window.orientation); break; } } -
樣式：
//豎屏時使用的樣式 @media all and (orientation:portrait) { .css{} } //橫屏時使用的樣式 @media all and (orientation:landscape) { .css{} }
4.11 移動端常見的一些功能
-
搖一搖功能：
HTML5 deviceMotion：封裝了運動傳感器數(shù)據(jù)的事件，可以獲取手機運動狀態(tài)下的運動加速度等數(shù)據(jù)。 -
手機拍照和上傳圖片：
<input type="file">的accept 屬性 <!-- 選擇照片 --> <input type=file accept="image/*"> <!-- 選擇視頻 --> <input type=file accept="video/*">使用總結(jié)：
-
iOS有拍照、錄像、選取本地圖片功能。 - 部分
android只有選取本地圖片功能。 -
winphone不支持。 -
input控件默認外觀丑陋。
-
-
消除
transition閃屏：.css{ /*設置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn)：保留 3D*/ -webkit-transform-style: preserve-3d; /*（設置進行轉(zhuǎn)換的元素的背面在面對用戶時是否可見：隱藏）*/ -webkit-backface-visibility: hidden; } -
開啟硬件加速：
- 解決頁面閃白。
- 保證動畫流暢。
.css { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } -
android上去掉語音輸入按鈕：input::-webkit-input-speech-button {display: none}
4.12 如何禁止百度轉(zhuǎn)碼？
<meta http-equiv="Cache-Control" content="no-siteapp" />
4.13 怎樣默認優(yōu)先使用最新版本IE和Chrome？
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
