***移動端瀏覽器：UC、QQ、歐朋、百度、360、谷歌、搜狗、獵豹；基本上都是webkit內核。
***手機頻幕多：安卓480*800，480*854，540*960，720*1280，1080*1920
***移動端調試方法：谷歌的模擬手機調試（F12，底部第二個手機圖標），本地服務器手機訪問。
***視口viewport：就是瀏覽器顯示頁面內容的屏幕區域。以前視口默認的是980px爲標準。
meta視口標籤通知瀏覽器。設備有多寬，佈局的視口就有多寬。
<meta>標籤是如何控制網頁的尺寸和縮放瀏覽器的說明。
width=device-width部分將頁面的寬度設置爲跟隨設備的屏幕寬度（視設備而定）。
initial-scale=1.0部分設置瀏覽器首次加載頁面時的初始縮放級別。
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
***物理像素：屏幕顯示的最小顆粒，是真實存在的。
物理像素比：pc端1px表示一個物理像素，iphone8等1px表示兩個物理像素。一般開發尺寸是分辨率的一半。
retina（視網膜屏）：把更多的物理像素點壓縮到一塊屏中。手機中一般這樣處理，圖片100*100，在樣式中width、height變成50；然後放到視網膜屏中就不會變的模糊。
背景縮放：background-size:背景寬度 高度；只寫一個值表示等比縮放。屬性值可以是像素、百分比、cover（等比縮放填充滿盒子會裁剪）、contain（把圖像等比擴展至最大尺寸，只要長或者寬有一個到邊了就不拉伸了，所以會有留白）
***移動端的主流方案：單獨製作（主流）、響應式頁面兼容pc端。
移動端初始化：插件normalize.css
http://necolas.github.io/normalize.css/
npm install normalize.css
***移動端點擊會顯示高亮，去除高亮的辦法：-webkit-tap-hightlight-color:transparent；設置點擊透明。
在移動端瀏覽器默認的外觀在iOS上加上這個屬性才能給按鈕和輸入框自定義樣式：-webkit-appearance:none;
禁用長按頁面時彈出菜單：{-webkit-touch-callout:none}
***移動端常見佈局：流式佈局（百分比佈局）、flex佈局、less+rem+媒體查詢佈局、混合佈局；
響應式頁面兼容移動端：媒體查詢、bootstarp；
流式佈局：百分比佈局；max-width: 最大寬 min-width:最小寬。
***精靈圖2倍縮放注意事項：先在ps中縮放再測量，在代碼裏也要background-size做相應的縮放。
***flex佈局：https://www.jianshu.com/p/4290522e1560
pc端一般用傳統佈局，移動端一般用flex佈局；
任何一個容器都可以指定爲flex佈局。通過給父盒子添加flex屬性來控制自子盒子的位置和排列方式。
當爲父盒子設定爲flex佈局後，子元素的float,clear,vertical-align屬性將失效。
display:flex;在使用之前，一定先要確定到主軸。
父常見屬性：flex-direction:設置主軸，默認主軸是x軸，row從左往右，row-reverse從右往左排列，column從上倒下，column-reverse從下到上。元素都是沿着主軸排列的。
justify-content:設置主軸上的子元素的排列方式；flex-start從頭開始，從左到右；flex-end從尾部開始;center：在主軸居中對齊；space-around平分剩餘空間；space-between先兩邊貼邊在平分剩餘空間。
flex-wrap:nowrap默認子元素不換行，如果裝不下，會縮小子元素。wrap：裝不下就換行。
alignitems：在側軸上子元素的排列方式（單行使用）；stretch拉伸（不要設置高度）、center擠在一起居中、flex-start、flex-end。
aligncontent：在側軸上子元素的排列方式（多行使用，換行）；stretch拉伸（不要設置高度）、center擠在一起居中、flex-start、flex-end、space-around（上下沿都有距離）、space-between（一個貼上沿，一部分貼下沿）；
flex-flow:是flex-direction和flex-wrap的複合寫法。
子常見屬性：
flex：定義子項目分配剩餘空間，表示佔多少份。flex：1；默認是0.
align-self：控制子項在自己的側軸上的排列方式。flex-end；
order：定義子項的排列順序。數值越小越靠前，默認是0；
flex佈局種主要針對寬度變化；
rem主要是針對高度變化；
*****rem適配佈局
em是相對於父元素的字體大小。
rem是相對於html元素的字體大小。html { font-size:10px;};通過修改html中的文字大小，來控制頁面中元素大小，必須寫在樣式最上面。
媒體查詢：可以針對不同的屏幕尺寸設置不同的樣式。@media mediatype and|not|only (media feature){}
mediatype媒體類型：all所有、print用於打印機、scree電腦平板手機。
and|not|only關鍵字：
media feature特性：width、min-width、max-width.
@media screen and (max-width:800px){
body {
background:red;
}上面的意思是手機屏幕寬度小於800時，body的顏色時紅色。
}
引入資源：直接在link中判斷設備尺寸，然後引入相應的css。<link rel="stylesheet" href="" media="screen and (min-width:320px)">
<link rel="stylesheet" href="" media="screen and (min-width:640px)">
***less擴展來css特性。
中文地址：lesscss.cn
常見的css預處理器有：Sass、Less、Stylus。
新建一文件以.less結尾。
less變量：先定義後使用；@變量：值；body { background-color:@變量}
less編譯：html頁面不能直接使用less，必須編譯成css才能使用。EasyLESS插件可以自動把less文件直接編譯成css，只要保存less文件，就自動會生成一個同名的css文件；
**less嵌套：
.top {
background-color:green;
a {
background-color:white;
// 僞類必須要加&符號
&:hover{
color: blue;
}
}
}
如果是&代表當前父元素的僞類或者僞元素或者交集選擇器，如果不加&就表示後代。
less運算：數字、顏色、變量都可以運算，加減乘除。運算符的左右兩側要有一個空格。如果兩個數都有單位且不一樣，最後的結果以第一個單位爲準。
@color: red;
@border:5+10px;
body{
background-color: @color;
}
.top {
border:@border black solid;
width: 200px-50;
a {
background-color:white;
// 僞類必須要加&符號
&:hover{
color: blue;
}
}
}
***less遇到的問題：Unable to load plugin clean-css please make sure that it is installed under or at the same level as less
解決吧less的版本降低，npm install [email protected] -g；保存後就會自動的生成相應的css文件。
***rem+媒體查詢+less
首先選750px爲標準；用屏幕尺寸除以我們劃分的分數，得到html裏面的文字大小（不同屏幕得到的文字大小是不一樣的），
最後頁面元素的rem值 = 頁面元素在750px下的px值 / html裏面的文字大小。
less文件中導入其他的less文件；@import "其他的less文件"
***flexible.js+rem
flexible.js是淘寶出的，下載地址 https://github.com/amfe/lib-flexible；
需要引入文件：<script src="flexible.js"></script>
flexible把html劃分爲10等份。
cssrem插件，可以吧css中的值轉換成rem；這個插件默認的html字體大小是16px；用的時候需要修改跟設計圖一樣的75培75
；
當屏幕超過750px時按照750px來算，要用更媒體查詢重新設置html {font-size:75px!important; }
***響應式佈局
前端開發框架Bootstrap；網站：bootcss.com bootstrap.css88.com
<link href ="bootstrap.css" rel="stylesheet">
響應式開發的原理：通過媒體查詢針對不同個寬度的設備進行佈局和樣式的設置。
通過一個父級作爲佈局容器，來配合子元素來改變佈局樣式。
bootstrap的使用步驟：1、創建文件夾的結構；吧bootstrap文件放到我們的bootstrap文件夾中（這個文件夾要自己創建）；2、創建html骨架；3.引入樣式；4.書寫內容
柵格化分爲式12份；
