一、視口的概念
- layout viewport(布局視口)：在PC端上，布局視口等於瀏覽器窗口的寬度。而在移動端上，由於要使為PC端瀏覽器設計的網站能夠完全顯示在移動端的小屏幕里，此時的布局視口會遠大於移動設備的屏幕，就會出現滾動條。js獲取布局視口：
document.documentElement.clientWidth | document.body.clientWidth； - visual viewport(視覺視口)：用戶正在看到的網頁的區域。用戶可以通過縮放來查看網站的內容。如果用戶縮小網站，我們看到的網站區域將變大，此時視覺視口也變大了，同理，用戶放大網站，我們能看到的網站區域將縮小，此時視覺視口也變小了。不管用戶如何縮放，都不會影響到布局視口的寬度。js獲取視覺視口：
window.innerWidth； - ideal viewport(理想視口)：布局視口的一個理想尺寸，只有當布局視口的尺寸等於設備屏幕的尺寸時，才是理想視口。js獲取理想視口：
window.screen.width；
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,
maximum-scale=1.0, minimum-scale=1.0">
1、content屬性 ： 用來設置視口的，width屬性就是視口的寬，它可以是任意數字，設為 device-width 表示設備的寬度，這就是我們需要的理想視口，當沒有設置時默認會按980px去顯示
2、initial-scale : 視口初始的縮放比，可設置為大於0的數字
3、user-scalable : 設置是否允許用戶進行縮放，可設置為 yes / no 或 1 / 0
4、maximum-scale : 設置視口的最大縮放比，可設置為大於 0 的數字
5、minimum-scale : 設置視口的最小縮放比，可設置為大於 0 的數字
三、涉及顯示的幾個概念
1、物理像素與CSS像素
設備像素又稱物理像素（physical pixel），設備能控制顯示的最小單位，我們可以把這些像素看作成顯示器上一個個的點。
CSS像素是Web編程的概念，獨立於設備的用於邏輯上衡量像素的單位，也就是說我們在做網頁時用到的CSS像素單位，是抽象的，而不是實際存在的。
2、分辨率(物理像素)
screen.height //screen.width返回顯示設備的信息。
除非調整顯示設備的分辨率，否則看作是常量。
(顯示)分辨率就是屏幕上顯示的像素個數，分辨率160×128的意思是水平像素數為160個，垂直像素數128個。
分辨率越高，像素的數目越多，感應到的圖像越精密。
而在屏幕尺寸一樣的情況下，分辨率越高，顯示效果就越精細和細膩。
以分辨率為1024×768的屏幕來說，即每一條水平線上包含有1024個像素點，共有768條線，即掃描列數為1024列，行數為768行。
分辨率不僅與顯示尺寸有關，還受顯像管點距、視頻帶寬等因素的影響。其中，它和刷新頻率的關系比較密切，嚴格地說，只有當刷新頻率為“無閃爍刷新頻率”，顯示器能達到最高多少分辨率，才能稱這個顯示器的最高分辨率為多少。
3、PPI
pixels per inch所表示的是每英寸所擁有的像素（pixel）數目。
手機屏幕的PPI當達到一定數值時，人眼就分辨不出顆粒感了。
這個數值是多少？按照2010年前蘋果公司CEO史蒂夫·喬布斯（Steve Jobs）在iPhone 4發布會上對視網膜技術的介紹：“當你所拿的東西距離你10-12英寸（約25-30厘米）時，它的分辨率只要達到300ppi這個‘神奇數字’（每英寸300個像素點）以上，你的視網膜就無法分辨出像素點了。”(即所謂的retina視網膜屏幕。之所以叫做視網膜屏幕，是因為屏幕的PPI(屏幕像素密度)太高，人的視網膜無法分辨出屏幕上的像素點。)
那么，是不是屏幕PPI超過這個數值就沒有意義了？
==>除PPI之外，還看它的飽和度，渲染度。
4、DPR設備像素比
DPR(devicePixelRatio)是默認縮放為100%的情況下，設備像素和CSS像素的比值：
DPR = 設備像素 / CSS像素(某一方向上)
普通密度桌面顯示屏的devicePixelRatio=1
高密度桌面顯示屏(Mac Retina)的devicePixelRatio=2
主流手機顯示屏的devicePixelRatio=2或3
因為大部分桌面顯示器的devicePixelRatio為1，所以在PC端我們感受不出來CSS Pixel 與 物理像素的差別。
舉個栗子來說，一張100x100的圖片，通過CSS設置它width:100px; height:100px; 。在電腦上打開，沒有什么問題，但是在手機上打開，屏幕按照邏輯分辨率來渲染，假設手機的devicePixelRatio=3，那么就相當於拿3個物理像素來描繪1個電子像素。這等於拿一個三倍的放大鏡去看你的圖片，你的圖片可能因此變得模糊，因為細節不夠。所以一般明智的做法是把圖片換成300x300的，CSS寬高不變，這樣在手機上展示時，CSS寬高換算成物理像素是300x300，你的圖片也是300x300，就不會變糊了。
5、常用移動設備的PPI與DPR
| IOS設備 | PPI | DPR |
| iPhone4 | 326 | 2 |
| iPhone4s | 326 | 2 |
| iPhone5 | 326 | 2 |
| iPhone5s | 326 | 2 |
| iPhone6 | 326 | 2 |
| iPhone6s | 326 | 2 |
| iPhone6 PLUS | 441 | 3 |
| iPhone6s PLUS | 441 | 3 |
| iPad | - - | 2 |
| iPad | - - | 3 |
| android | 尺寸 | dpr |
| 低清設備 | － | 1 |
| mx2 | 800*1280 | 2.5 |
| 小米note | 720*1280 | 2.75 |
| 三星note4 | - | 4 |
6、二倍圖
由於移動設備的物理像素和css單位px是不同的，在文字上的體現差別不大但在圖片上可能就會造成模糊，
以iphone6為例，它的物理像素比是2，用css設置一張圖片50 * 50的圖片，此時在手機上的顯示是100 * 100
的分辨率，相當於被拉伸了兩倍，圖片看起來就很模糊，解決辦法是用100 * 100的圖，再設置它的寬高為50 * 50。
背景精靈也是，會把精靈圖 * 2，但獲取它的background-position時，要先把精靈圖 / 2,再去量它的位置 , 然后
設置background-size : 寬 / 2 高 / 2 ;
注：background-size: cover : 背景拉伸到能覆蓋這個容器
background-size: contain : 背景拉伸，當寬或高其中有一個鋪滿，就不再拉伸了
7、初始化
做移動端頁面時的初始化：
（1）設置視口標簽
（2）引入normalize.css(是一個可以定制的CSS文件，它讓不同的瀏覽器在渲染網頁元素的時候形式更統一)
（3）去掉一些移動端的默認模式
I、移動端的a標簽點擊會有高亮效果，需要清除，設為 transparent 透明
html{ -webkit-tap-highlight-color: transparent ; }
II、移動端瀏覽器，ios默認有自己的外觀需要去掉才能自定義樣式
html{ -webkit-appearance: none ; }
III、禁止長按頁面時彈出菜單
img,a{ -webkit-touch-callout: none ; }
四、移動開發的技術選型
1、單獨做移動開發
通常情況下輸入網址，會判斷是PC端還是移動端打開，移動端打開就在域名前加 m. ，打開移動端的網頁
-- 單獨做移動端有下方幾個技術方案
（1）、流式布局（寬度設為百分比的形式）
（2）、flex彈性布局（推薦）
（3）、less + rem + 媒體查詢 或者 rem + flexible.js (推薦)
（4）、混合布局（推薦）
2、響應式布局
（1）、媒體查詢
（2）、bootstrap
五、flex基本樣式
css3中新增的屬性 ： display：flex;
彈性盒布局中有兩根軸，主軸和側軸
常見的父元素屬性
1、flex-direction : 設置主軸的方向
（1）、row : 主軸為 X 軸，元素從左往右排列 （默認）
（2）、row-reverse : 主軸為 X 軸，元素從右往左排列
（3）、column : 主軸為 Y 軸， 元素從上到下排列
（4）、column-reverse : 主軸為 Y 軸 ，元素從下到上排列
2、justify-content : 設置主軸上子元素的排列方式（當主軸為X軸時）
（1）、flex-start : 元素左對齊 （默認，結果與上面的row 相同）
（2）、flex-end : 元素右對齊（類似float:left, 與上面的row-reverse不同，它不會改變排列方式）
（3）、center : 元素居中對齊
（4）、flex-around : 平均分配剩余空間
（5）、flex-between : 兩側貼邊再平均分配剩余空間
3、flex-wrap : 設置子元素是否換行
（1）：nowrap ：不換行（默認）
（2）：wrap : 換行
4、align-items : 設置側軸子元素的排列方式，適合內容為單行時使用（當側軸為Y軸時）
（1）：flex-start : 元素上對齊（默認，結果類似column）
（2）：flex-end : 元素下對齊
（3）：center : 居中
（4）：stretch : 拉伸，內容拉伸到和父級一樣高
5、align-content : 設置側軸子元素的排列方式，適合內容為多行時使用（當側軸為Y軸時）
（1）：flex-start : 元素上對齊（默認，結果類似column）
（2）：flex-end : 元素下對齊
（3）：center : 居中
（4）、flex-around : 平均分配剩余空間
（5）、flex-between : 兩側貼邊再平均分配剩余空間
6、flex-flow : 復合屬性，同時設置direction 和 wrap
常見的子項屬性
1、flex : num : 定義子項目多少份分配剩余空間（默認是0，根據父盒子的剩余空間計算）
2、align-self : 設置子項目在側軸的排列方式，默認繼承父級的排列方式
3、order : 定義子項目在主軸的排列順序（默認都是0，數值越小排的越靠前）
六、rem + less + 媒體查詢
1、rem基礎
（1）、em : 是相對於父元素的字體大小來定的
（2）、rem : （root em）
rem的基准是相對於html的字體大小（font-size）定的
如根元素設置font-size為12px,則其他元素設置的2em就等於24px
（3）、rem的優點就是通過修改html里面的文字大小來改變頁面中元素的大小，方便整體控制
2、媒體查詢 （Media Query 是css3中的屬性）
（1）、媒體查詢可以針對不同屏幕尺寸去設置不同的樣式
（2）、語法規范
@media mediatype and not|and|only （media feature）{
CSS（code）;
}
mediatype : 查詢類型
將不同終端設備划分成不同的類型，稱為媒體類型
all : 所有類型
print : 用於打印機和打印預覽
screen : 用於電腦屏幕，平板電腦，智能手機等
例如 ： @media screen and (min-width : 980px){
html{ font-size : 50px ; }
} //當屏幕寬度大於等於 980px時
注： min-width : 表示 大於等於 ， max-width : 表示 小於等於
（3）建議尺寸從小到大寫
（4）引入資源 （如針對不同屏幕大小，調用不同的CSS文件）
<link rel="stylesheet" href="s320.css" media="screen and (max-width : 639px)">
<link rel="stylesheet" href="s640.css" media="screen and (min-width : 640px)">
3、less
less是一門css拓展的語言，css預處理語言
less中引入另一個less文件 ： @import "less文件名，不用加后綴"
（1）、less編譯
html不能直接解析less文件，需要通過編譯轉換為css文件
vscode的應用商店搜索 easy less，安裝后在less文件里每次保存都會生成對應的css文件
（2）、less變量語法
@變量名 ： 值 ;
注：變量名不能以數字開頭，不能用特殊符號，用@前綴，大小寫敏感
例如 ： @color : "#ccc";
css屬性中 color ： @color ;
（3）、less嵌套
I、子元素的樣式直接寫在父元素里
如 div{
a{ color : "#ccc"; }
}
II、偽類，偽元素，交集選擇等要在內層選擇器前加上&
如 a{
&:hover{ color : "red"; }
}
（4）、less運算
less中任何數字，顏色或者變量都可以參加運算
注：加減乘除（運算符號）兩側要有空格
兩個運算數只有一個有單位，結果為這個單位
如果兩個都有單位，以第一個運算數的單位為准
4、如何通過rem+less+媒體查詢寫移動端頁面
（1）、將屏幕划分成若干等分（這里假設為15等份）
（2）、利用媒體查詢動態設置html里的字體大小
如：若屏幕大於等於 320px時，font-size為 320px / 15
若屏幕大於等於540px時，font-size為 540px / 15
若屏幕大於等於750px時，font-size為 750px / 15
（3）、頁面元素的rem值 = 頁面元素在750px像素下的px值 / 屏幕為750px的font-size
得到一個比例
七、rem + flexible.js
1、原理 ： 將頁面划分成10等份
2、需要安裝一個將px轉成rem的插件 ——> cssrem
它默認html的font-size是16px,需要到setting.json中把它設置為最大屏幕下的font-size
3、flexible是根據當前屏幕的寬度除以10來計算font-size的，假設我當前需要的最大寬度為750px時，
就需要加上限定：@media screen and (min-width: 750px){
html{ font-size: 75px; }
}
八、bootstrap的柵格系統
1、初始化時需要加上如下
//以IE最高版本內核進行渲染
<meta http-equiv="X-UA-Compatible" content="ie=edge">
//兼容html5和媒體查詢
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
<![endif--]
2、bootstrap預定義了 .container類
（1）、響應式布局的容器，固定寬度，將內容划分成12份
（2）、定義了左右15px的內邊距，在定義 .col外加上 .row 就不會有15內邊距
（3）、大屏（screen >=1200px）寬為1170px .col-lg-*
中屏（screen >=992px）寬為970px .col-md-*
小屏（screen >=768px）寬為750px .col-sm-*
超小屏（screen <768px）寬為100%px .col-xs-*
（4）、假設我現在需要最大寬度為1280時，用媒體查詢定義
@media screen and (min-width : 1280px){
body{ width: "1280px"; }
}
3、預定義了 .container-fluid類
（1）、運用流式布局，用百分百寬度，適合單獨做移動端開發
4、列偏移
.col-md-offset-* //可以將列向右偏移
5、列排序 （比如想講后面的列排到前面）
.col-md-push-* //推，往右推幾份
.col-md-pull-* //拉，往左拉幾份
6、響應式工具
根據屏幕的大小，對某些元素進行隱藏
.hidden-xs ——> 超小屏幕時隱藏
.hidden-sm ——> 小屏幕時隱藏
.hidden-md ——> 中屏幕時隱藏
.hidden-lg ——> 大屏幕時隱藏
注：.visible-....與之相反