1）rem單位
2）媒體查詢
3）less
4）rem 適配方案
國內的UC和QQ，百度等手機瀏覽器都是根據Webkit修改過來的內核，國內尚無自主研發的內核，兼容移動端主瀏覽器，處理Webkit內核瀏覽器即可。
移動端屏幕尺寸
參考：https://www.material.io/resources/devices/
說明：作為前端開發，不建議糾結dp，dpi，pt，ppi等單位，使用px即可。
視口( viewport )就是瀏覽器顯示頁面內容的屏幕區域。視口可以分為布局視口、 視覺視口和理想視口
1. 布局視口layout viewport
一般移動設備的瀏覽器都默認設置了一個布局視口,用於解決早期的PC端頁面在手機上顯示的問題。
iOS, Android基本都將這個視口分辨率設置為980px ,所以PC上的網頁大多都能在手機上呈現,不過元素看上去很小，-般默認可以通過手動縮放網頁。
2. 視覺視口visual viewport
字面意思，它是用戶正在看到的網站的區域。注意:是網站的區域。
我們可以通過縮放去操作視覺視口, 但不會影響布局視口,布局視口仍保持原來的寬度。
3.理想視口ideal viewport
為了使網站在移動端有最理想的瀏覽和閱讀寬度而設定
理想視口,對設備來講,是最理想的視口尺寸
需要手動添寫meta視口標簽通知瀏覽器操作
meta視口標簽的主要目的:布局視口的寬度應該與理想視口的寬度一致,簡單理解就是設備有多寬,我們布局的視口就多寬
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minium-scale=1.0,maximum-scale=1.0">
說明：
(1)只要做移動端適配，就對頁面添加此標簽，此標簽能夠使得頁面不在按照980px進行加載
(2)必要內容：
width=device-width 設置頁面視口大小和設備尺寸大小相同
user-scalable=no 設置用戶不可對頁面進行放大縮小設置
initial-scale=1.0 設置頁面加載倍率為1倍
(3)可選內容：
minimum-scale=1.0 設置頁面最小縮小倍率為1.0
maximum-scale=1.0 設置頁面最大放大倍率為1.0
物理像素&物理像素比
物理像素點指的是屏幕顯示的最小顆粒,是物理真實存在的。這是廠商在出廠時就設置好了,比如蘋果6\7\8是750* 1334
我們開發時候的1px不是一定等於1個物理像素的
PC端頁面, 1個px等於1個物理像素的,但是移動端就不盡相同
一個px的能顯示的物理像素 點的個數,稱為物理像素比或屏幕像素比
例如：iPhone8物理像素寬為750像素，實際占屏幕像素的375像素
PC端和早前的手機屏幕/普通手機屏幕: 1CSS像素= 1物理像素的
Retina (視網膜屏幕)是一種顯示技術,可以將把更多的物理像素點壓縮至一塊屏幕里 ,從而達到更高的分辨率,並提高屏幕顯示的細膩程度。
多倍圖
對於一張50px*50px的圖片,在手機Retina屏中打開,按照剛才的物理像素比會放大倍數,這樣會造成圖片模糊
在標准的viewport設置中,使用倍圖來提高圖片質量,解決在高清設備中的模糊問題
通常使用二倍圖，因為iPhone 6\7\8的影響,但是現在還存在3倍圖4倍圖的情況,這個看實際開發公司需求
背景圖片注意縮放問題
二倍圖說明：
- 需要一個50*50像素(css像素)的圖片直接放到我們的iphone8里面會放大2倍100*100就會模糊
- 采取的是放一個100* 100圖片然后手動的把這個圖片縮小為50*50(css像素)
- 准備的圖片比我們實際需要的大小大2倍，這就方式就是2倍圖
背景縮放
background-size: contain; //css3新增
單位:長度 |百分比Icover Icontain;
cover把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域。
contain把圖像圖像擴展至最大尺寸,以使其寬度和高度完全適應內容區域
倍圖解釋：@3X 3倍圖；@2X 2倍圖；@1X 1倍圖；
二倍精靈圖做法;
在firework里面把精靈圖等比例縮放為原來的一半
之后根據大小測量坐標
注意代碼里面background-size也要寫 :精靈圖原來寬度的一半
1. 單獨制作移動端頁面（主流）
通常情況下,網址域名前面加m(mobile)可以打開移動端。通過判斷設備,如果是移動設備打開,則跳到移動端頁面。
例如：京東商城手機版、淘寶觸屏版、蘇寧易購手機版...
2. 響應式頁面兼容移動端（其次）
通過判斷屏幕寬度來改變樣式,以適應不同終端。
例如：三星手機官網...
缺點：制作麻煩，需要花很大精力去調兼容性問題
1. 移動端瀏覽器
移動端瀏覽器基本以webkit內核為主,因此我們就考慮webkit兼容性問題。
我們可以放心使用H5標簽和CSS3樣式。
同時我們瀏覽器的私有前綴我們只需要考慮添加webkit即可
2. CSS初始化normalize.css
移動端CSS初始化推薦使用normalize.css/
Normalize.css :保護了有價值的默認值
Normalize.css :修復了瀏覽器的bug
Normalize.css :是模塊化的
Normalize.css :擁有詳細的文檔
官網地址: http://necolas.github.io/normalize.css/
3. CSS3盒子模型box-sizing
傳統模式寬度計算: 盒子的寬度= CSS中設置的width + border + padding
CSS3盒子模型: 盒子的寬度= CSS中設置的寬度width里面包含了border和padding
也就是說,我們的CSS3中的盒子模型，padding 和border不會撐大盒子了
| /*CSS3盒子模型*/ box-sizing: border-box; /*傳統盒子模型* / box-sizing: content-box; |
傳統or CSS3盒子模型?
移動端可以全部CSS3盒子模型
PC端如果完全需要兼容 ,我們就用傳統模式,如果不考慮兼容性,我們就選擇CSS3盒子模型
4. 特殊樣式
| /*CSS3盒子模型+/ box-sizing: border-box; -webkit-box-sizing: border-box; /*點擊高亮我們需要清除清除 設置為transparent完成透明，適用於iso的鏈接與可點擊元素*/ -webkit-tap-highlight-color: transparent; /*在移動端瀏覽器默認的外觀ios上加。上這個屬性才能給按鈕和輸入框自定義樣式*/ -webkit-appearance: none; /大禁用長按頁面時的彈出菜單*/ img,a { -webkit-touch-callout: none;} |
移動端技術選型
移動端布局和以前我們學習的PC端有所區別
1.單獨制作移動端頁面(主流)
流式布局(百分比布局)
flex彈性布局(強烈推薦)
less + rem+媒體查詢布局
混合布局
2. 響應式頁面兼容移動端(其次)
媒體查詢
bootstrap
常用布局
流式布局,就是百分比布局,也稱非固定像素布局。
通過盒子的寬度設置 成百分比來根據屏幕的寬度來進行伸縮,不受固定像素的限制,內容向兩側填充。
流式布局方式是移動web開發使用的比較常見的布局方式。
max-width 最大寬度( max-height最大高度)
min-width 最小寬度 ( min-height最小高度)
設置視口標簽以及引入初始化樣式
| <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/index.css"> |
常用初始化樣式
| body { margin: 0 auto; min-width: 320px; max-width: 640px; background: #fff; font-size: 14px; font-family: -apple-system, Helvetica, sans-serif; line-height: 1.5; color: #666; } |
傳統布局與flex布局
傳統布局
兼容性好
布局繁瑣
局限性，不能再移動端很好的布局
flex彈性布局
操作方便，布局極為簡單，移動端應用很廣泛
PC端瀏覽器支持情況較差
IE11或更低版本，不支持或僅部分支持
建議:
1.如果是PC端頁面布局,我們還是傳統布局。
2.如果是移動端或者不考慮兼容性問題的PC端頁面布局,我們還是使flex彈性布局
布局原理
1) flex是flexible Box的縮寫,為"彈性布局" ,來為盒狀模型提供最大的靈活性,任何一個容器都可以指定為flex布局。
2) 當我們為父盒子設為flex布局以后,子元素的float、clear 和vertical-align屬性將失效。
伸縮布局=彈性布局=伸縮盒布局=彈性盒布局=flex布局
3) 采用Flex布局的元素,稱為Flex容器( flex container) , 簡稱"容器"。它的所有子元素自動成為容器成員,稱為Flex項目( flex item) , 簡稱"項目"。
總結：flex布局原理：就是通過給父盒子添加flex屬性，來控制子盒子的位置和排列方式。
常見父項屬性
以下由6個屬性是對父元素設置的
display: flex; //設置為flex布局
flex-direction :設置主軸的方向
說明：主軸默認x軸，水平向右，側軸默認y軸，水平向下；主軸和側軸是變化的，flex-direction設置誰為主軸，剩下的就是側軸。
屬性：row 默認值，從左到右；row-reverse 從右到左；column 從上到下；column- reverse從下到上
justify-content :設置主軸上的子元素排列方式
注意：使用這個屬性之前一定要確定好主軸是哪個
屬性：
flex-start默認值從頭部開始如果主軸是x軸，則從左到右
flex-end從尾部開始排列
center在主軸居中對齊(如果主軸是x軸則水平居中)
space-around平分剩余空間
space-between先兩邊貼邊再平分剩余空間(重要)
flex-wrap :設置子元素是否換行
說明：默認情況下,項目都排在一條線(又稱“軸線”). 上。flex-wrap屬性定義, flex布局中默認是不換行的。
屬性：
nowrap 默認，不換行
wrap 換行
align-items :設置側軸（默認是在y軸）上的子元素排列方式(單行)
屬性：flex-start 默認值 從上到下；flex-end 從下到上；center 擠在一起居中（垂直居中）；stretch 拉伸
align-content :設置側軸上的子元素的排列方式(多行)
說明：設置子項在側軸上的排列方式並且只能用於子項出現換行的情況(多行) , 在單行下是沒有效果的。
屬性值：
flex-start默認值在側軸的頭部開始排列
flex-end在側軸的尾部開始排列
center在側軸中間顯示
space-around子項在側軸平分剩余空間
space-between子項在側軸先分布在兩頭，再平分剩余空間
stretch 設置子項元素高度平分父元素高度
align-content和align-items區別
align-items適用於單行情況下，只有上對齊、下對齊、 居中和拉伸
align-content適應於換行(多行)的情況下(單行情況下無效)，可以設置上對齊、下對齊、 居中、拉伸以及平均分配剩余空間等屬性值。
總結就是單行找align-items多行找align-content
flex-flow :復合屬性,相當於同時設置了flex-direction 和flex-wrap
常見子項屬性
flex屬性定義好項目分配剩余空間,用flex來表示多少份數。
item {
flex: <number>; /* default 0 */
}
align-self控制子項自己在側軸上的排列方式
說明：align-self屬性允許單個項目有與其他項目不-樣的對齊方式,可覆蓋align-items屬性。默認值為auto ,表示繼承父元素的align-items屬性,如果沒有元素,則等同於stretch。
order屬性定義項目的排列順序
說明：數值越小,排列越靠前,默認為0。
注意:和z-index不一樣。
rem (root em)是一個相對單位 ,類似於em , em是元素字體大小。
不同的是rem的基准是相對於html元素的字體大小。
比如,根元素( html )設置font-size= 12px;非根元素設置width:2rem;則換成px表示就是24px。
媒體查詢( Media Query )是CSS3新語法。
使用@media查詢,可以針對不同的媒體類型定義不同的樣式
@media可以針對不同的屏幕尺寸設置不同的樣式
當你重置瀏覽器大小的過程中,頁面也會根據瀏覽器的寬度和高度重新渲染頁面
目前針對很多蘋果手機、Android手機 ,平板等設備都用得到多媒體查詢
語法規范
@media mediatype and|not|only(media feature){
CSS-Code;
}
media query語法格式中支持設備類型(mediatype )如下：
all 適用於所有的設備
aural適用於語音和音頻合成器
braille 適用於觸覺反饋設備
embossed 適用於凸點文字（盲文）和刷設備
handheld 適用於小型或者手提設備
print適用於打印機
projection 適用於投影圖像，如幻燈片
sceen 適用於計算機顯示器（最常用的一個）
tty適用於使用固定間距字符格的設備如電傳打字機和終端
tv適用於電視類設備
關鍵字
關鍵字將媒體類型或多個媒體特性連接到-起做為媒體查詢的條件。
and :可以將多個媒體特性連接到一起,相當於“且”的意思。
not :排除某個媒體類型,相當於“非”的意思,可以省略。
only :指定某個特定的媒體類型,可以省略。
媒體特性(media feature)
每種媒體類型都具體各自不同的特性,根據不同媒體類型的媒體特性設置不同的展示風格。我們了解三個。
注意他們要加小括號包含
width：定義輸出設備中頁面可見區域的寬度
min-width：定義輸出設備中頁面最小可見區域寬度
max-width：定義輸出設備中頁面最大可見區域寬度
例如：@media screen and(min-width:1024px){/* 當屏幕小於1024px，發生的事*/
css語句
}
注意:為了防止混亂,媒體查詢我們要按照從小到大或者從大到小的順序來寫,但是我們最喜歡的還是從小到大來寫,這樣代碼更簡潔
還有一種引入資源的方式
<link rel="stylesheet" media="mediatype and|not|only(media feature)" href="mystylesheet.css">
針對不同的媒體使用不同stylesheets
維護css的弊端
CSS是一門非程序式語言,沒有變量、函數、SCOPE (作用域)等概念。
CSS 需要書寫大量看似沒有邏輯的代碼, CSS冗余度是比較高的。
不方便維護及擴展,不利於復用。
CSS沒有很好的計算能力
非前端開發 工程師來講,往往會因為缺少CSS編寫經驗而很難寫出組織良好且易於維護的CSS代碼項目。
Less介紹
Less ( Leaner Style Sheets的縮寫)是一門CSS擴展語言,也成為CSS預處理器。
做為CSS的一種形式的擴展,它並沒有減少CSb的功能,而是在現有的CSS語法上,為CSS加入程序式語
言的特性。
它在CSS的語法基礎之上,引入了變量, Mixin(混入) , 運算以及函數等功能,大大簡化了CSS的編寫
,並且降低了CSS的維護成本,就像它的名稱所說的那樣, Less可以讓我們用更少的代碼做更多的事情。
Less中文網址: http://lesscss.cn/
常見的CSS預處理器: Sass、Less、 Stylus
Less安裝
①安裝nodejs ,可選擇版本,網址: http://nodejs.cn/download/
②檢查是否安裝成功 ,使用cmd命令( windows是window +r打開運行輸入cmd) --- 輸入“node -v"查看版本即可
③基於nodejs在線安裝Less ,使佣cmd命令“ npm install -g less"即可
④檢查是否安裝成功 ,使用cmd命令"lessc -v” 查看版本即可
Less使用
我們首先新建一個后綴名為less的文件，在這個less文件里面書寫less語句。
Less變量：
變量是指沒有固定的值，可以改變的。因為我們CSS中的一些顏色和數值等經常使用。
語法：@變量名:值;
規范：必須有@為前綴 不能包含特殊字符 不能以數字開頭 大小寫敏感
例如：@color: red;
Less編譯：
本質上，Less 包含一套自定義的語法及一個解析器，用戶根據這些語法定義自己的樣式規則，這些規則 最終會通過解析器，編譯生成對應的 CSS 文件。所以，我們需要把我們的 less文件，編譯生成為css文件，這樣我們的html頁面才能使用
可以使用開發工具的編譯插件（如：vscode、hbuilderx）或者使用像kaola軟件一樣的預處理語言開發工具。
Less嵌套：
我們經常用到選擇器的嵌套
| #header .logo { width: 300px; } |
Less 嵌套寫法
| #header { .logo { width: 300px; } } |
如果遇見 （交集|偽類|偽元素選擇器）
內層選擇器的前面沒有 & 符號，則它被解析為父選擇器的后代；
如果有 & 符號，它就被解析為父元素自身或父元素的偽類
| a:hover{ color:red; } |
Less 嵌套寫法
| a{ &:hover{ color:red; } } |
Less運算
任何數字、顏色或者變量都可以參與運算。就是Less提供了加（+）、減（-）、乘（*）、除（/）算術運算。
| /*Less 里面寫*/ @witdh: 10px + 5; div { border: @witdh solid red; } /*生成的css*/ div { border: 15px solid red; } /*Less 甚至還可以這樣 */ width: (@width + 5) * 2; |
注意：
乘號（*）和除號（/）的寫法
運算符中間左右有個空格隔開 1px + 5
對於兩個不同的單位的值之間的運算，運算結果的值取第一個值的單位
如果兩個值之間只有一個值有單位，則運算結果就取該單位
讓一些不能等比自適應的元素，達到當設備尺寸發生改變的時候，等比例適配當前設備。
使用媒體查詢根據不同設備按比例設置html的字體大小，然后頁面元素使用rem做尺寸單位，當html字體大小變化元素尺寸也會發生變化，從而達到等比縮放的適配。
4.1 rem 實際開發適配方案
① 按照設計稿與設備寬度的比例，動態計算並設置 html 根標簽的 font-size 大小；（媒體查詢）
② CSS 中，設計稿元素的寬、高、相對位置等取值，按照同等比例換算為 rem 為單位的值；
4.2 rem 適配方案技術使用（市場主流）
| 技術方案1 |
技術方案2（推薦） |
| less 媒體查詢 rem |
flexible.js rem |
|
|
|
總結：兩種方案現在都存在。方案2 更簡單。
4.3 rem 實際開發適配方案1
rem + 媒體查詢 + less 技術
① 設計稿常見尺寸寬度
| 設備 |
常見寬度 |
| iphone 4.5 |
640px |
| 640px |
750px |
| Android |
常見320px、360px、375px、384px、400px、414px、500px、720px 大部分4.7~5寸的安卓設備為720px |
一般情況下，我們以一套或兩套效果圖適應大部分的屏幕，放棄極端屏或對其優雅降級，犧牲一些效果 現在基本以750為准。
②動態設置 html 標簽 font-size 大小
l 假設設計稿是750px
l 假設我們把整個屏幕划分為15等份（划分標准不一可以是20份也可以是10等份）
l 每一份作為html字體大小，這里就是50px
l 那么在320px設備的時候，字體大小為320/15 就是 21.33px
l 用我們頁面元素的大小 除以不同的 html 字體大小會發現他們比例還是相同的
l 比如我們以 750為標准設計稿
l 一個100*100像素的頁面元素 在 750屏幕下， 就是 100 / 50 轉換為rem 是 2rem * 2 rem 比例是 1比1
l 320屏幕下， html 字體大小為 21.33 則 2rem = 42.66px 此時寬和高都是 42.66 但是 寬和高的比例還是 1比1
l 但是已經能實現不同屏幕下 頁面元素盒子等比例縮放的效果
③元素大小取值方法
最后的公式： 頁面元素的rem值 = 頁面元素值（px） / （屏幕寬度 / 划分的份數）
屏幕寬度/划分的份數 就是 html font-size 的大小
或者： 頁面元素的rem值 = 頁面元素值（px） / html font-size 字體大
4.4 rem 實際開發適配方案2
l 簡潔高效的rem適配方案flexible.js
l 手機淘寶團隊出的簡潔高效移動端適配庫
l 我們再也不需要在寫不同屏幕的媒體查詢，因為里面js做了處理
l 它的原理是把當前設備划分為10等份，但是不同設備下，比例還是一致的。
l 我們要做的，就是確定好我們當前設備的html 文字大小就可以了
l 比如當前設計稿是 750px，那么我們只需要把 html 文字大小設置為75px(750px / 10) 就可以
l 里面頁面元素rem值：頁面元素的px 值 / 75
l 剩余的，讓flexible.js來去算
github地址：https://github.com/amfe/lib-flexible
5.1. 技術選型
方案：我們采取單獨制作移動頁面方案
技術：布局采取rem適配布局（less + rem + 媒體查詢）
設計圖： 本設計圖采用750px 設計尺寸
5.2. 搭建相關文件夾結構
5.3 設置視口標簽以及引入初始化樣式
| <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="css/normalize.css"> |
5. 4. 設置公共common.less文件
①新建common.less 設置好最常見的屏幕尺寸，利用媒體查詢設置不同的html字體大小，因為除了首頁其他頁面也需要
②我們關心的尺寸有 320px、36v0px、375px、384px、400px、414px、424px、480px、540px、720px、750px
③划分的份數我們定為 15等份
④因為我們pc端也可以打開我們移動端首頁，我們默認html字體大小為50px，注意這句話寫到最上面
5.5. 新建index.less文件
① 新建index.less 這里面寫首頁的樣式
② 將剛才設置好的 common.less 引入到index.less里面 語法如下：
// 在 index.less 中導入 common.less 文件
@import “common”
③ 生成index.css 引入到 index.html 里面
5.6. body樣式
body { min-width: 320px; width:15rem; margin: 0 auto; line-height: 1.5; font-family: Arial,Helvetica; background: #F2F2F2; }
6.1. 技術選型
方案：我們采取單獨制作移動頁面方案
技術：布局采取rem適配布局2（flexible.js + rem）
設計圖： 本設計圖采用750px 設計尺寸
6.2. 搭建相關文件夾結構
6.3. 設置視口標簽以及引入初始化樣式還有js文件
| <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/index.css"> |
頁面需要引入這個js文件
| 在 index.html 中 引入 flexible.js 這個文件 <script src=“js/flexible.js”> </script> |
6.4. body樣式
| body { min-width: 320px; width:10rem; margin: 0 auto; line-height: 1.5; font-family: Arial,Helvetica; background: #F2F2F2; } |