三：rem+**查詢
四：less使用(建新檔案，字尾.less)
1：rem (root em)是乙個相對單位，類似於em，
em是父元素字型大小。
rem的基準是相對於html元素的字型大小。
比如:根元素（html）設定font-size=12px;
非根元素設定width:2rem;
則換成px表示就是24px。
【嘰嘰歪歪】
把頁面中所有表示大小的單位都換成rem
把對應的裝置寬度中設定乙個合適的html標籤的字型大小
@media 可以針對不同的螢幕尺寸設定不同的樣式使用 @media 查詢，可以針對不同的**型別定義不同的樣式
/* 括號裡的漢字僅做解釋，與**無關 */
@media mediatype（型別） and|not|only（關鍵字） (media feature)（**型別）
將不同的終端裝置劃分成不同的型別，稱為**型別屬性
描述all
用於所有裝置
用於印表機和列印預覽
scree
用於電腦螢幕，平板電腦，智慧型手機等
關鍵字將**型別或多個**特性連線到一起做為**查詢的條件。屬性
描述and
可以將多個**特性連線到一起，相當於「且」的意思。
not排除某個**型別，相當於「非」的意思，可以省略。
onl指定某個特定的**型別，可以省略。
加小括號包含屬性
描述width
定義輸出裝置中頁面可見區域的寬度
min-width
定義輸出裝置中頁面最小可見區域寬度 ， ≥ ，大於等於
max-width
定義輸出裝置中頁面最大可見區域寬度， ≤ ，小於等於
rem單位是跟著html來走的，有了rem頁面元素可以設定不同大小尺寸**查詢可以根據不同裝置寬度來修改樣式
**查詢+rem 就可以實現不同裝置寬度，實現頁面元素大小的動態變化
less （leaner style sheets 的縮寫） 是一門 css 擴充套件語言，也成為css預處理器。less中文網
@變數名:值;本質上，less 包含一套自定義的語法及乙個解析器，使用者根據這些語法定義自己的樣式規則，這些規則【嘰嘰歪歪】就是說建乙個.less的檔案，然後在裡面寫東西，儲存的時候，軟體會自動生成乙個.css的同名檔案。（有個外掛程式）最終會通過解析器，編譯生成對應的 css 檔案。
☇easy less 外掛程式
.less→.css***→.html(引)
子元素樣式直接寫進父親的 {} 裡面如果遇見 （交集|偽類|偽元素選擇器）
任何數字、顏色或者變數都可以參與運算。就是less提供了加（+）、減（-）、乘（*）、除（/）算術運算。移動Web開發 移動端常見布局 flex布局
flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為 flex 布局。當我們為父盒子設為 flex 布局以後，子元素的 float clear 和 vertical align 屬性將失效。伸縮布局 彈性布局 伸縮盒布局 彈性盒布局...
Web移動端布局
螢幕尺寸是指螢幕對角線的長度，單位為英吋，1英吋 2.54厘公尺 常見移動端裝置螢幕尺寸 iphone4 3.5英吋 iphone6,7,8 4.7英吋 iphone6,7,8 plus 5.5英吋 iphone5 4英吋 螢幕解析度是指橫縱方向上的畫素點數，單位為px，1px 1畫素點 常見移動端...
web移動端布局
對移動端適配不熟悉的同學，可以看看 使用flexible實現手淘h5頁面的終端適配 再聊移動端頁面的適配 如何在vue專案中使用vw實現移動端適配 vw 是什麼？vw viewport s width 簡寫，1vw 等於 window.innerwidth 的 1 vh viewport s hei...