​ 移動端瀏覽器主要對webkit核心相容，現在的移動端主要針對手機端開發，移動端碎片化比較嚴重，解析度和螢幕尺寸不一

除錯方法

1. 谷歌瀏覽器模擬手機除錯
2. 搭建本地web伺服器，手機和伺服器在同一個區域網內，通過手機訪問伺服器
3. 使用外網伺服器，直接IP或域名訪問

視口

視口就是瀏覽器顯示頁面內容的螢幕區域。視口可以分佈為佈局視口、視覺視口和理想視口

佈局視口layout viewport

• 一般移動裝置的瀏覽器都預設設定了一個佈局視口，用於解決早期的PC端頁面在手機上顯示的問題
• IOS、Android都把視口解析度設定為980px，所以pc端上的頁面大多都能在手機上呈現，只不過元素看起來很小，一般只能手動縮放頁面

視覺視口 visual viewport

使用者正在看到的網站的區域，可以通過縮放操作視覺視口，但是不會影響佈局視口，佈局視口仍然保持原來的寬度

理想視口 ideal viewport

• 為了使網站在移動端有最理想的瀏覽和閱讀寬度而設定
• 理想視口，對裝置來講，是最理想的視口尺寸
• 需要手寫meta視口標籤來通知瀏覽器操作
• meta視口標籤的目的：佈局視口的寬度和理想視口的寬度保持一致，就是裝置有多寬，佈局的視口就有多寬

meta視口標籤

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
 

width viewport寬度，可以設定device-width特殊值

initial-scale 初始縮放比，大於0的數字

maximum-scale 最大縮放比，大於0的數字

minimum-scale 最小縮放比，大於0的數字

user-scalable 使用者是否可以縮放，yes或no

視口寬度和裝置一致、預設縮放比1:0，不允許使用者自行縮放、最大允許縮放比1.0，最小允許縮放比1.0

二倍圖

物理畫素&物理畫素比

物理畫素點指螢幕顯示的最小顆粒，1px在PC端等於1物理畫素，但是移動端不一定，一個1px能顯示多少物理畫素點成為螢幕畫素比

• 視網膜螢幕是一種顯示技術，把更多物理畫素點壓縮至一塊螢幕內，從而達到更多解析度

多倍圖

圖片在手機中開啟，會按照物理畫素比放大，出現模糊現象，因此用倍圖的方式（放二倍大小的圖片再縮小到需要的大小）

背景縮放

• background-size
• 規定背景影象尺寸，兩個引數為高度，寬度，只寫一個引數就是指寬度，等比例縮放
• 單位可以是百分比，是相對父盒子的百分比
• cover：等比例縮放，要求完全覆蓋盒子 ，可能有部分背景圖片顯示不全
• contain: 等比例縮放，儘量鋪滿不會超出，可能會有空白

移動端開發選擇

單獨製作移動端頁面（主流）

響應式頁面相容移動端

移動端技術解決方案

移動端初始化nomalize.css

http://necolas.github.io/normalize.css/

CSS3盒子模型box-sizing

boxing-size:border-box;(傳統是content-box)

padding和border不會再撐大盒子

移動端可以完全相容CSS3

特殊樣式

-webkit-tap-highlight-color: transparent;//清除高亮
-webkit-appearance: none;//在ios上加上這個屬性才可以給按鈕和輸入框自定義樣式
img,a{-webkit-touch-callout:none}//禁止長按頁面時彈出選單

二倍精靈圖

background-size縮放的是整個精靈圖

• 在firework裡把精靈圖等比例縮放為原來的一半
• 根據大小測量座標
• 程式碼裡的bgcsize也要縮放

移動端常見佈局

主要包括流式佈局、flex佈局、rem佈局

流式佈局

百分比佈局，非固定畫素佈局

• 通過盒子的寬度設定成百分比來根據螢幕伸縮
• 需要設定最大值最小值，防止影響內容顯示max-width: min-width

flex佈局

• 傳統佈局相容性好，但是佈局繁瑣，侷限性高
• 伸縮佈局=彈性佈局=伸縮盒佈局=彈性盒佈局=flex佈局
• flex佈局在PC端支援較差，移動端應用廣泛
• 採用flex佈局的元素稱為flex容器，所有子元素自動成為容器成員，成為flex專案，簡稱專案

佈局原理

• 任何一個容器都可以使用flex佈局
• 父盒子設為flex佈局後，子元素的float、clear、和vertical-align屬性失效
• 原理：通過給父盒子新增flex屬性，控制子盒子的位置和排列方式

flex父項常見屬性

• flex-direction:設定主軸的方向，預設是row，元素是跟著主軸排列的，設為column，則主軸變為y軸，實現從上到下排列
• justify-content: 設定主軸上的子元素排列方式
• flex-wrap:設定子元素是否換行
• align-content:設定側軸上子元素的排列方式（多行），只能用於出現換行的情況
• align-items: 設定側軸上的子元素排列方式（單行）
• flex-flow: 複合屬性，同時設定direction和wrap

主軸是x軸方向，水平向右；側軸是y軸方向，垂直向下

justify-content：一定要確定好主軸

• flex-start 靠左對齊
• flex-end 靠右對齊
• center: 子元素居中對齊
• space-around：平分剩餘空間(每個盒子都有左右邊距)
• space-between:先兩邊貼邊再分配剩餘空間

flex-wrap:

預設不換行，當多個子盒子裝不進去父盒子的時候，會強制放在一行，縮小子盒子

• warp：允許換行

align-items:

• center:側軸居中（側軸為y時垂直居中）
• flex-start: 貼著側軸上沿
• flex-end :貼著側軸下沿
• stretch ：拉伸，必須子盒子沒有高度，會拉伸到和父盒子一樣高（margin不影響）

align-contents:

比items多space-around、space-between兩個值，可以實現平分空間，在單行下沒有效果

flex-flow:

是flex-direction和flex-wrap屬性的複合屬性

flex-flow: row wrap;

flex子項常見屬性

• flex:定義子專案分配剩餘空間，用flex表示子專案佔的份數

可用於佈局兩邊固定盒子，中間盒子長度可隨螢幕大小調整的情況（自適應） //聖盃佈局

• align-self:控制子項自己在側軸上的排列方式

允許某個專案有與其他專案不同的排列方式，可覆蓋align-items屬性，預設值為auto，相當於繼承align-items屬性，如果沒有父元素則等同於stretch

• order：屬性定義專案的排列順序，移動的是左右排列，與z-index不同

數值小的靠前排列

rem佈局

rem單位

root em相對單位，em是父元素字型大小

rem是相對於html元素的字型大小

優點：可以通過修改html裡面的文字大小來改變頁面中元素的大小，可以整體控制

媒體查詢

媒體查詢是CSS3新語法

• 可以針對不同螢幕尺寸設定不同樣式

@media mediatype and|not|only (media feature){
    
}
@media screen and (min-width:500px){
    body{
        background-color:red
    }
}

mediatype:媒體型別

all：用於所有裝置

print：用於印表機和列印預覽

screen：用於電腦螢幕

媒體特性

width：定義

max-width:800 只有寬度小於800時，才執行下面樣式

• screen還有and必須帶上
• 必須帶單位px
• 媒體查詢+rem可以實現不同裝置裡尺寸動態變化，給html設定font-size，然後設定字型行高（rem單位）等隨寬度變化

引入資源

三星：大屏和小屏使用兩個css檔案，直接在link中判斷裝置的尺寸，然後引入不同的css檔案

<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)"
<link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)"

適配方案原理

1. 讓一些不能等比自適應的元素，達到當裝置尺寸發生改變的時候，等比例適配當前裝置
2. 使用媒體查詢根據不同裝置按比例設定html字型大小，然後頁面元素使用rem作為尺寸單位，當HTML字型大小變化元素尺寸也會變化，從而達到等比縮放的適配

技術方案1

less、媒體查詢、rem

一般情況以一套或者兩套效果圖適應大部分螢幕，基本以750px寬度為準

假設設計稿是750px，把螢幕化為15等份（標準不一定是15），每一份作為html字型大小，這裡為750/15=50px，那麼在320px裝置時，字型大小為320/15=21.33px，比例相同，本質是實現等比例縮放

• 頁面元素的rem值=頁面元素值(px)/(螢幕寬度/劃分份數)

• 螢幕寬度/劃分份數就是HTML font-size的大小

技術方案2（更推薦）

flexible.js 、rem

兩種方案都存在，方案2更簡單

淘寶團隊出品，在js裡處理，不需要寫不同螢幕的媒體查詢，原理是將當前裝置劃分為10等份，我們只需要把html文字大小設定為75px，裡面頁面元素rem值=頁面px值/75

外掛：cssrem自動轉換rem 在外掛擴充套件設定裡調整字型大小基準值為45

響應式佈局

響應式開發原理

利用媒體查詢針對不同寬度的裝置進行佈局和樣式的設定，從而適配不同裝置的目的

超小螢幕（手機）<768 寬度設定為100%

小屏裝置（平板） >=768~<992 寬度設定為750

中等螢幕（桌面顯示器） >=992~<1200 寬度設定為970px

寬屏裝置（大桌面顯示器）>1200 寬度設定為1170px

需要一個父級作為佈局容器，在不同螢幕下，通過媒體查詢改變這個佈局容器排列方式和大小，從而實現不同螢幕下，看到不同的頁面佈局和樣式

Bootstrap

基於HTML、CSS和JAVASCRIPT，使web開發更加快捷

版本3.xx放棄了IE6-7，偏向於開發響應式佈局、移動裝置優先的WEB專案

入門文件：https://bootstrap.css88.com/getting-started/#download

1. 建立HTML骨架檔案

在head裡meta後新增

<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

2. 引入bootstrap樣式檔案
3. 書寫內容

可以在原來的基礎上更改，新增類名，要注意權重

佈局容器

bootstrap使用container類定義好了響應式佈局的容器大小；只需要div.container 內容寫在裡面即可；適合做響應式

container-fluid 類 流式佈局容器；佔據全部視口的容器，適合做單獨的移動端頁面

柵格系統

說明 https://bootstrap.css88.com/css/#grid

將頁面佈局劃分成等寬的列

• 不管螢幕有多寬，統一劃分為12列（把container劃分為12列

例如類col-lg-3表示佔3列（大桌面裝置）

• 如果孩子份數相加等於12，則孩子能佔滿整個container；小於12則會有空白；大於12則會換行

col-md-4 表示中等螢幕下佔4列

• 可以多個類名同時，便於實現響應式

• 每一列預設有個15pxpadding值

列巢狀

為了使用內建的柵格將內容巢狀，通過新增一個新的.row和一系列.col-md-*列到已經存在的.col-md-*列內即可實現。巢狀row所包含的列加起來應該等於12。

加row可以取消padding值並且和父親一樣高

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

列偏移

使用.col-md-offset-*可以將列偏移到右側。這些class通過使用*選擇器將所有列增加了列的左側margin。例如，.col-md-offset-4將.col-md-4向右移動了4個列的寬度。

可以計算實現右對齊、居中等

列排序

通過使用.col-md-push-*和.col-md-pull-*就可以很容易的改變列的順序。

響應式工具

可以實現在不同螢幕下的顯示(visible)或隱藏(hidden)