1、視口( viewport)就是瀏覽器顯示頁面內容的螢幕區域。視口可以分為佈局視口（原始佈局）、視覺視口（能看到的部分）和理想視口（原始佈局貼合能看到的部分）

手動新增meta視口通知bom

meta視口標籤的主要目的∶佈局視口的寬度應該與理想視口的寬度一致，簡單理解就是裝置有多寬，我們佈局的視口就多寬

2、PC頁面一個畫素1px等於一個物理畫素，移動端就不同（retina螢幕，物理畫素比，如iphone8內畫素比為1開發畫素：2物理畫素）（以前製作的移動端故障上傳單，在設計簽名板時有碰到過）

在導圖時，要使用倍圖的方式解決圖片放大的問題（畫素比為1：2，圖片需要50px*50px顯示，則準備一個100px*100px圖片，手動縮小

3、背景圖片大小：background-size / cover拉伸圖片至覆蓋整個盒子 / contain圖片保持原來比例自適應盒子邊緣

4、移動端開發選擇：

單獨製作移動端頁面（pc為www.jd.com 移動端為m.jd.com）根據裝置判斷：流式佈局（百分比佈局）、flex彈性佈局、less+rem+媒體查詢佈局、混合佈局

響應式相容pc與移動端，根據螢幕尺寸來改變內容：媒體查詢、bootstrap

5、聖盃佈局：移動端搜尋欄若左右各有控制元件且空間不縮放，可以考慮空間用定位，搜尋欄盒子左右加margin且不給寬度，使其和父系一樣寬，在縮放的時候可以自適應大小

6、flex佈局：彈性佈局

當我們為父盒子設為flex佈局以後，子元素的float、clear和vertical-align屬性將失效。

伸縮佈局=彈性佈局=伸縮盒佈局=彈性盒佈局=flex佈局

預設主軸x水平向右

預設側軸y垂直向下

給父系新增的常用屬性：

flex-direction: 設定主軸方向 ：row-reverse從右到左/column-reverse從下到上

justify-content: 主軸上子元素排列方式 space-between兩邊貼邊，剩餘分配

flex-wrap: 設定子元素是否換行 wrap/nowrap

align-content：設定側軸上子元素排列方式（多行，單行無效果）

align-items：設定側軸上子元素排列方式（單行）

flex-flow：複合屬性，相當於同時設定了flex-direction和flex-wrap

給子元素新增的屬性：

flex : 加數字，子項weight，類似安卓的weight

align-self: 某一子項側軸單獨控制位置

order：軸的前後位置，和z-index有區別

7、rem佈局

rem (root em)是一個相對單位，類似於em , em是父元素字型大小。不同的是rem的基準是相對於html元素的字型大小。

比如，根元素( html)設定font-size=12px;非根元素設定width:2rem;則換成px表示就是24px.

所以rem的原理就是根據html中根元素文字大小來改變子元素大小，優勢是隻需要修改一個根大小(媒體查詢)，即可改變整體大小

媒體查詢(Media Query）是CSS3新語法。

使用@media查詢，可以針對不同的媒體型別定義不同的樣式

@media可以針對不同的螢幕尺寸設定不同的樣式

/*媒體特性：在螢幕/印表機/所有 和/非/指定 寬...下的樣式為｛｝*/
@media screen/print/all and/not/only (width/max-width/min-width:800){

}

當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面

媒體樣式層疊性優勢：

還可引用資源，針對不同螢幕大小呼叫不同css樣式

<link rel="stylesheet" href="1.css" media="screen and (max-width: 640px)">

less：

Less ( Leaner Style Sheets 的縮寫）是一門CSS擴充套件語言，也成為CSS前處理器。

做為CSS的一種形式的擴充套件，它並沒有減少CSS的功能，而是在現有的CSS語法上，為CSS加入程式式語言的特性。

它在CSS的語法基礎之上，引入了變數，Mixin（混入），運算以及函式等功能，大大簡化了CSS的編寫，並且降低了CSS的維護成本，就像它的名稱所說的那樣，Less可以讓我們用更少的程式碼做更多的事情。

less本質還是css，只是封裝好的運算子，html引用的時候引用的還是less編譯後的css檔案

偽類：如 a：hover == a｛&：hover｝

加減乘除注意事項：

乘號 ( * ) 和除號 ( / ) 的寫法

運算子中間左右有個空格隔開1px + 5

對於兩個不同的單位的值之間的運算，運算結果的值取第一個值的單位

如果兩個值之間只有一個值有單位，則運算結果就取該單位

rem適配方案：

rem+less+媒體查詢

flexible.js+rem