當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

移动web知识总结（超详细）附带思维导图

發(fā)布時間：2023/12/29 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了移动web知识总结（超详细）附带思维导图小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

移動web簡介

什么是移動web

用于展示在移動設(shè)備上的網(wǎng)頁(web)，稱之為移動端頁面。
移動設(shè)備泛指手機、平板等設(shè)備。

如何調(diào)試移動web頁面

一些瀏覽器為前端開發(fā)者提供了真機調(diào)試模擬環(huán)境。例如：chrome。
打開開發(fā)者工具，點擊手機圖標即可切換到模擬環(huán)境。

移動web發(fā)展歷程

從2014年10月HTML5標準規(guī)范最終發(fā)布后，移動web就迎來了飛速的發(fā)展。因為使用HTML5技術(shù)可以更方便更快捷的開發(fā)現(xiàn)代web應(yīng)用程序
而移動端的手機瀏覽器都是比較新的 HTML5在移動端的瀏覽器支持情況都比較好
所以HTML5主要應(yīng)用就是在移動端移動web開發(fā)中。
至今移動web已經(jīng)發(fā)展了很多年各方面的技術(shù)都比較成熟穩(wěn)定網(wǎng)上的教程也比較完整成熟所以現(xiàn)在的web已經(jīng)到全民移動web的時代了
移動互聯(lián)網(wǎng)商業(yè)模式多樣化，移動互聯(lián)網(wǎng)超越PC互聯(lián)網(wǎng)，引領(lǐng)發(fā)展新潮流。

移動端布局特點

移動端頁面與pc端頁面的區(qū)別

a. 多機型適配

pc端頁面不需要考慮機型適配的問題

但是移動端的設(shè)備機型尺寸特別多，需要考慮不同的機型尺寸

b. 頁面結(jié)構(gòu)簡單

由于移動設(shè)備的屏幕遠小于pc端，不采用很花哨的頁面結(jié)構(gòu)。

由于移動端的性能遠不如pc端，所以網(wǎng)頁不會很復(fù)雜。

常見的移動web頁面結(jié)構(gòu)：

廣告欄

搜索欄

輪播圖

導(dǎo)航欄

商品列表

底部

🔑移動web布局的核心思想

a. 不允許出現(xiàn)水平滾動條

? pc端屏幕比較寬，多數(shù)采用固定寬度，水平居中兩邊留白的方式來布局，所以pc端不需要考慮屏幕寬度

? 移動端屏幕都是很小的，可用的顯示寬度是有限的，所以要占據(jù)所有可用的寬度，但是不同的手機屏幕寬度不一樣，這就要考慮屏幕適配問題

b. 頁面整體寬度與屏幕一致

c. 盒子采用內(nèi)減模式(怪異盒子模型、IE盒子模型、c3盒子模型) border-box

移動web布局方式介紹

a. 流式布局

? 使用百分比實現(xiàn)布局(百分比布局)

b. 彈性布局

c. rem布局

? 以html根標簽上設(shè)置的字體大小作為一個相對量。

d. 響應(yīng)式布局

👉 以上布局方式并不是一成不變，每種布局方式?jīng)]有好壞之分，要根據(jù)情況靈活運用。例如：能用面分比就使用百分比不能使用就使用rem，rem不能使用就使用固定寬度。

移動web入門

視口(viewport)

簡單的講視口就是手機屏幕用于顯示網(wǎng)頁的窗口(pc端是沒有視口的，視口是移動設(shè)備專有的名詞)。
早期手機上顯示網(wǎng)頁的效果瀏覽者必須通過移動頁面才可以看到其余部分。這樣操作起來十分不便。
為了讓用戶有良好的瀏覽體驗，現(xiàn)在在進行移動端布局時都會將頁面寬度設(shè)計成與視口寬度一致。這樣頁面在移動端顯示時就會自動全屏顯示。
那么我們的代碼要如何寫才可以將頁面的寬度與視口相同呢？

通過meta標簽設(shè)置viewport來解決這個問題。

name 要設(shè)置的屬性，viewport對視口進行設(shè)置。

content 針對viewport設(shè)置那些內(nèi)容。

width=device-width 作用是將要展示的頁面布局的寬度與設(shè)備的寬度相同。
initial-scale=1.0 初始縮放為1(不縮放)
maximum-scale=1.0 最大的縮放比例(不縮放)
user-scalable=0 是否允許用戶縮放

vscode快捷方式 meta:vp + tab

👉 移動端的頁面上寫入以上代碼，就可以實現(xiàn)不用為頁面整體寬度設(shè)置一個固定值，就可以將頁面的寬度設(shè)置為任何一個移動設(shè)備屏幕的寬度。

移動端布局流程

布局的流程

1.ui會設(shè)計效果圖

ui人員會選擇dpr為2的設(shè)備來設(shè)計效果圖。

常見的尺寸：640px、750px、960px

👉 ui人員在設(shè)計效果圖時，使用的是物理像素。

2.前端人員編碼

前端人員在編碼時，需要轉(zhuǎn)換為邏輯像素。

如果ui提供的是2倍的效果圖，我們需要將所有的尺寸除2。寬、高、字體大小、內(nèi)外邊距。

如果是pc端的設(shè)計稿就是按設(shè)計稿上的物理像素來書寫css尺寸。

注意事項

水平方向不允許出現(xiàn)滾動條

元素寬度不能超過視口寬度

禁止用戶縮放

只進行寬度適配

頁面整體寬度適配視口

使用百分比單位，高度使用固定px或內(nèi)容撐開

百分比布局也稱之為流式布局，流式布局并不是一種新的布局技術(shù)，而是百分比布局的

盒子采用內(nèi)減模式 box-sizing:boder-box

盒子不受padding、border的影響避免出現(xiàn)滾動條。

示例代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>Document</title><link rel="stylesheet" href=""><style>*{margin:0;padding:0;}div{/* 盒子的寬度不能大于視口的寬度，如果大于就會出現(xiàn)滾動條 *//* width:500px; *//* 寬度使用百分比，高度使用px或內(nèi)容撐開 */width:100%;height:100px;background:red;padding:20px;/* 盒子采用內(nèi)減模式，避免出現(xiàn)滾動條 */box-sizing: border-box;border:5px solid red;}</style> </head> <body><div>hello</div></body> </html>

👉 父盒子采用內(nèi)減模式后，子盒子寬度再設(shè)置為100%時，子盒子的寬度是相對于父盒子內(nèi)容的寬度(父盒子的width - border - padding)。此時子盒子再設(shè)置padding、border、margin并不會從子盒子的尺寸上減去。如果子盒子設(shè)置了box-sizing:border-box;當設(shè)置padding、border時會自動減去。

flex布局(彈性/伸縮布局)

什么是彈性布局：
flex意為伸縮的，彈性的。彈性布局是css 3新增的一種盒子模型。
一句話：就是用于解決一個盒子內(nèi)多個子盒子的排列及其分布。

彈性布局的特點
輕松的實現(xiàn)子元素的以上情況中位置的控制，間距的控制(不需要計算間距、不需要解決父元素塌陷問題)。
當父元素變大時彈性適應(yīng)。

彈性布局的三個組成部分

彈性布局就是解決子元素在水平方向以及垂直方向上的排列以及分布方式。

所以彈性布局有三個組成部分

子元素
主軸(水平方向的控制)

主要用于控制子元素在水平方向的排列以及分布方式

次軸/交差軸(垂直方向的控制)

主要用于控制子元素在交差方向的排列以及分布方式

👉主軸、次軸并不是一個真實存在的軸，僅是我們在使用彈性布局時的一個方向性參照

👉 主軸與側(cè)軸的方向并不是一成不變的

justify-content控制主軸的排列及分布

justify-content屬性主要用于控制子元素在主軸方向上(主軸方向默認是水平從左向右)的排列及分布方式。

假設(shè)：主軸的方向是水平的，從左向右的。

flex-start

彈性開頭(相當于左對齊)，默認的

flex-end

彈性結(jié)尾(相當于右對齊)

center

居中對齊

space-between

等距分隔(左、右子元素與父元素左邊、右邊沒有間距)

space-around

等距環(huán)繞(左、右子元素與父元素左邊、右邊有間距)

space-evenly

平均分隔(與父元素的兩側(cè)以及子元素之間，距離都是相同的)

案例代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>Document</title><style>.box{width: 500px;border:1px solid red;/* 開啟彈性布局 */display:flex;/* justify-content 用于控制子元素在主軸方向上的排列以及分布方式取值：flex-start 默認的，從左向右flex-end 從右向左center 水平居中space-between 等距分隔space-around 等距環(huán)繞space-evenly 平均分隔(與父元素的兩側(cè)以及子元素之間，距離都是相同的)*/justify-content:space-evenly;}.box div{width:100px;height:100px;}</style> </head> <body><div class="box"><div class="item1" style="background:brown">1</div><div class="item2" style="background:cyan">2</div><div class="item3" style="background:orange">3</div><div class="item4" style="background:blue">4</div></div> </body> </html>

align-items控制次軸的排列及分布

align-items屬性主要用于控制子元素在次軸方向上(交軸方向默認是垂直從上向下)的排列及分布方式。

👉align-items主要用在子元素高度不一致的情況下使用

假設(shè)：次軸默認就是垂直的，方向是從向下的。

flex-start

上對齊，默認的

flex-end

下對齊

center

居中對齊

baseline

首行文字對齊

stretch

上下都對齊(上下拉伸)，當沒有設(shè)置子元素的高度時會拉伸

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>Document</title><link rel="stylesheet" href=""><script></script><style>#box{width:500px;height:300px;border:1px solid red;/* 啟用彈性布局 */display:flex;/* flex-start 上對齊*//* align-items: flex-start; *//* flex-end 下對齊*//* align-items: flex-end; *//* center 居中*//* align-items: center; *//* baseline 首先文字基線對齊*//* align-items: baseline *//* stretch 拉伸當元素沒有設(shè)計高度時才會被拉伸*/align-items: stretch;}#box div{width:100px;}</style> </head> <body><div id="box"><div class="div1" style="background:red;height:200px;font-size:40px;">1</div><div class="div2" style="background:blue;height:150px;">2</div><div class="div3" style="background:yellow;">3</div><div class="div4" style="background:cyan;height:200px;">4</div></div> </body> </html>

flex-wrap主軸換行

flex-wrap主要用于實現(xiàn)多行布局

nowrap

不實現(xiàn)換行

當不使用彈性換行時，如果子元素的寬度超出了父元素的寬度，那么子元素寬度會被自動壓縮。

wrap

當子元素的總寬大于父元素時，進行換行顯示。向下?lián)Q行

wrap-reverse

當子元素的總寬大于父元素時，進行換行顯示。向上換行

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>Document</title><link rel="stylesheet" href=""><script></script><style>#box{width:500px;height:300px;border:1px solid red;/* 啟用彈性布局 */display:flex;/* nowrap 默認的不換行當不使用彈性換行時，如果子元素的寬度超出了父元素的寬度，那么子元素寬度會被自動壓縮。*//* flex-wrap:nowrap; *//* 換行，向下?lián)Q行 *//* flex-wrap:wrap; *//* 換行，向上換行 */flex-wrap:wrap-reverse;}#box div{width:100px;}</style> </head> <body><div id="box"><div class="div1" style="background:red;height:100px;">1</div><div class="div2" style="background:blue;height:100px;">2</div><div class="div3" style="background:yellow;height:100px;">3</div><div class="div4" style="background:cyan;height:100px;">4</div><div class="div4" style="background:blue;height:100px;">5</div><div class="div4" style="background:cyan;height:100px;">6</div><div class="div4" style="background:red;height:100px;">7</div></div> </body> </html>

align-content控制多行的排列及分布

設(shè)置多行的對齊方式，只要當換行時才會生效。

假設(shè)：交差軸是垂直的，

flex-start

頂部對齊

flex-end

底部對齊

center

垂直方向居中對齊

space-between

垂直方向多行等距分隔

space-around

垂直方向多行等距環(huán)繞

space-evenly

平均分

stretch

高度拉伸，需要在沒有設(shè)置高度的情況下

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>Document</title><style>.box{width: 500px;height: 300px;border:1px solid red;/* 開啟彈性布局 */display:flex;flex-wrap:wrap;/* 當設(shè)置了換行之后，在次軸方向就產(chǎn)生了多行，此時就有控制多行之間的分布需求align-content取值：flex-start 靠上flex-end 靠下center 居中space-between 等距分隔space-around 等距環(huán)繞space-evenly 平均分*/align-content:space-evenly;}.box div{width:100px;height:100px;}</style> </head> <body><div class="box"><div class="item1" style="background:brown;">1</div><div class="item2" style="background:cyan">2</div><div class="item3" style="background:orange">3</div><div class="item4" style="background:blue">4</div><div class="item2" style="background:cyan">5</div><div class="item3" style="background:orange">6</div></div> </body> </html>

👉 具有content的屬性都是起點對齊、終點對齊、中間對齊、等距分隔、等距離環(huán)繞、拉伸

👉 具有items的屬性是控制一行時的對齊：起點對齊、終點對齊、中間對齊、文字基線、拉伸

子元素的屬性

flex

為子元素設(shè)置所要占據(jù)父元素尺寸的權(quán)重。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>Document</title><link rel="stylesheet" href=""><script></script><style>#box{width:500px;height:300px;border:1px solid red;/* 啟用彈性布局 */display:flex;/* 由于width屬性不生效了，所以彈性換行也不起作用 */flex-wrap: wrap;}.div1{/* flex與width同時設(shè)置width不會生效 */flex:1;width:200px;}.div2{flex:2;width:200px;}.div3{flex:3;width:200px;}.div4{flex:2;width:200px;}.div5{flex:1;width:200px;}</style> </head> <body><div id="box"><div class="div1" style="background:red;height:100px;">1</div><div class="div2" style="background:blue;height:100px;">2</div><div class="div3" style="background:yellow;height:100px;">3</div><div class="div4" style="background:blue;height:100px;">4</div><div class="div5" style="background:cyan;height:100px;">5</div></div> </body> </html>

👉 flex會在減去了子元素上已設(shè)置了width值(沒有設(shè)置width就使用內(nèi)容寬度)結(jié)果，進行計算權(quán)重。

order

設(shè)置子元素的排列順序，數(shù)值小的排在前面。默認為0

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>Document</title><link rel="stylesheet" href=""><script></script><style>#box{width:500px;height:300px;border:1px solid red;/* 啟用彈性布局 */display:flex;}.div1{flex:1;}.div2{flex:2;/* 數(shù)值越小越排在前面 */order:-2;}.div3{flex:3;order:-1;}.div4{flex:2;}.div5{flex:1;}</style> </head> <body><div id="box"><div class="div1" style="background:red;height:100px;">1</div><div class="div2" style="background:blue;height:100px;">2</div><div class="div3" style="background:yellow;height:100px;">3</div><div class="div4" style="background:blue;height:100px;">4</div><div class="div5" style="background:cyan;height:100px;">5</div></div> </body> </html>

align-self

取值align-items相同，僅僅是用于設(shè)置當前子元素的

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>Document</title><link rel="stylesheet" href=""><script></script><style>#box{width:500px;height:300px;border:1px solid red;/* 啟用彈性布局 */display:flex;/* 父元素統(tǒng)一設(shè)置 */align-items: center;}.div1{flex:1;}.div2{flex:2;order:-2;}.div3{flex:3;order:-1;}.div4{flex:2;/* 會覆蓋父元素的align-items的設(shè)置 */align-self: flex-start;}.div5{flex:1;}</style> </head> <body><div id="box"><div class="div1" style="background:red;height:100px;">1</div><div class="div2" style="background:blue;height:100px;">2</div><div class="div3" style="background:yellow;height:100px;">3</div><div class="div4" style="background:blue;height:100px;">4</div><div class="div5" style="background:cyan;height:100px;">5</div></div> </body> </html>

更改軸的方向

flex-direction 修改主軸的方向，當主軸方向修改時，次軸會自己修改為與主軸交差。

? row 代表水平

? row 默認是從左向右

? row-reverse 從右向左

? column 代表垂直

? column 從上向下

? column-reverse 從下向上

彈性布局小結(jié)

? 也是解決一個父元素內(nèi)多個子元素共存于一行的問題，還可以方便的進行分布的控制。

啟用彈性布局

? 父元素：

? display:flex;

? 主軸(默認是水平)

? justify-content: flex_start、flex_end、center、space-around、space-between

? 次軸(默認是垂直的)

? align-items: flex_start、flex_end、center、baseline、stretch

? 多行：flex-wrap:nowrap、wrap、wrap-reverse

? align-content: flex_start、flex_end、center、space-around、space-between

? 子元素：

? flex:整數(shù);

? order

? align-self 控制自己對齊方式

? 更改主軸：

? flex-direction

元素居中的三種方式

? text-align:center;

? margin:0 auto;

? justify-content:center;

rem布局

rem 與 em區(qū)別

em是相對單位，使用em進行尺寸度量的元素，都是相對于自身的文字尺寸，各自為政，太過零散，不好進行統(tǒng)一的控制。
rem也是相對單位，所有使用rem進行尺寸度量的元素，都是相對于根元素html標簽的文字尺寸，可以很容易的進行統(tǒng)一控制，只要html標簽的字體變了，所有元素的rem都會變化。

rem的使用流程

確定html根標簽的font-size設(shè)置為屏幕寬度(邏輯像素)的10分之1(這個10分之1就是rem與px的比例)

根據(jù)比例將px轉(zhuǎn)換為rem

vscode編輯器px to rem插件或 cssrem

在采用rem布局進行編碼時，我們需要將css尺寸轉(zhuǎn)換為rem，大家也感覺到了這種計算很繁瑣，但時vscode編輯器中的cssrem插件為我們提供了這樣的轉(zhuǎn)換。

alt + s: 設(shè)置rem與px的比例(屏幕css寬度的10分之1)

alt + z: 輸入數(shù)值后，按alt + z進行px與rem的轉(zhuǎn)換。

插件的px與rem換算比例的設(shè)置

文件 > 首選項 > 設(shè)置搜索插件名

動態(tài)設(shè)置html標簽的font-size

👉 以上代碼雖然實現(xiàn)了頁面效果在不同屏幕幾乎完全一致。但是對于html標簽的font-size的設(shè)置還是手動的，能否實現(xiàn)在不同頁面在不同的屏幕上自動設(shè)置font-size值呢？

為了能夠根據(jù)不同的屏幕來為html標簽設(shè)置相應(yīng)的字體大小，我們需要借助外力實現(xiàn)，我們要借助的外力是flexible.js文件。

👉 flexible.js 文件是淘寶為了自己的頁面能在不同的手機屏幕上都能為html標簽的字體大小設(shè)置10分之1的大小，自己書寫了一個js文件，來解決這個問題。flexible.js文件，可以動態(tài)的讀取屏幕的css像素，并除10，再設(shè)置給html標簽的字體屬性。

我們只需要下載flexible.js并引入到html文件中即可。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>Document</title><link rel="stylesheet" href=""><script src="flexible.js"></script> </head> <body></body> </html>

👉 在采用rem布局進行編碼時，只需要根據(jù)當前設(shè)計稿的css像素尺寸計算rem即可，不需要考慮當前設(shè)計稿在不同屏幕的情況。只需要計算出css像素與rem的對應(yīng)關(guān)系，至于rem與屏幕的對應(yīng)關(guān)系是由rem.js動態(tài)完成的。因為rem.js會自動根據(jù)不同的設(shè)備(不同的屏幕尺寸)，動態(tài)的獲取屏幕的css像素寬度，然后除10，最后設(shè)置給html的font-size屬性。

? 這樣就形成了html主外，rem主內(nèi)。html標簽將當前屏幕寬度情況，讀取過來以字體大小的形式保存起來。html內(nèi)所有的標簽再以這個字體大小為度量單位，就可以形成屏幕大了，html內(nèi)的元素就相應(yīng)的大了，屏幕小了html內(nèi)相應(yīng)元素就小了。就這么簡單，html的font-size參照屏幕，內(nèi)部標簽參照html。

Less(css預(yù)處理器)

Less介紹及開發(fā)環(huán)境的搭建

Less介紹

? 之前在進行css頁面布局時我們寫了很多重復(fù)的代碼，而且修改起來很麻煩。

? less是一種css語言的預(yù)處理器。

? 通俗的說，CSS預(yù)處理器是一種專門編寫css代碼的語言(工具)，通過less來編寫css代碼變得更靈活，更高效，更容易維護。

什么是預(yù)處理(預(yù)編譯)

Less是用來書寫css代碼的工具，Less文件的內(nèi)的代碼格式并不能被瀏覽器識別。想將Less文件代碼變成css代碼，必須先將這個Less文件預(yù)先進行處理。預(yù)處理的就可以將Less文件代碼轉(zhuǎn)換為css代碼。
目前編寫css的代碼的效率不高，為了適應(yīng)前端開發(fā)日益復(fù)雜和工程化的需要，所以科學(xué)家開發(fā)了書寫css代碼的新方式。這種預(yù)處理器有很多，最常被使用及討論的就是less、sass、stylus，我們主要學(xué)習(xí)less。

Less開發(fā)環(huán)境的搭建

👉 Less是編寫css的工具，工具就需要安裝才可以使用。

vscode編輯器

Less使用流程

先創(chuàng)建less文件

創(chuàng)建一個less文件，擴展名為less，在這個文件內(nèi)編寫less代碼

轉(zhuǎn)換為css文件

使用編輯器上安裝插件或命令來將less文件轉(zhuǎn)換為css文件

編輯器上安裝的less插件在對less文件進行保存時，會自動對less文件內(nèi)的代碼轉(zhuǎn)換為css代碼，并保存為css文件，以備html引入

html文件中引入css文件

在html文件中引入的是轉(zhuǎn)換后的css文件，并不是原less文件。

瀏覽器根本不識別less代碼，僅實現(xiàn)轉(zhuǎn)換后的css代碼。

示例：

Less的語法

? 因為 Less 和 CSS 非常像。 Less 的語法，僅是在CSS 語言語法上增加了少許方便的擴展，所以 Less 對于有css基礎(chǔ)的人來說易學(xué)很多。

? 任何一門語言最終都要體現(xiàn)在代碼上，less中可以書寫什么樣的代碼呢？

變量

變量的作用

變量用于存儲數(shù)據(jù)，數(shù)據(jù)只要指的是css中多次使用的數(shù)值(尺寸、字體大小)或字符串(顏色單詞)。

css中的數(shù)據(jù)指的是冒號右側(cè)的內(nèi)容。

變量的語法

@變量名:數(shù)據(jù)

👉 變量名可以是全數(shù)字，但不推薦。變量名就可以包含下劃線與中橫線

注意事項

less中的變量可以使用 + - * / 進行數(shù)值運算

混入

混入的作用

將一段css代碼，引入到另一個選擇器中。

混入的語法

.類名()

👉 也可以是id選擇器，絕大多數(shù)使用的是類選擇器。

嵌套

嵌套的作用

將后代選擇器的代碼書寫在父選擇器的大括號內(nèi)，提高代碼的可讀性。

選擇子代元素

&符號

作用

用于表示當前選擇的元素的本身，主用于給偽類添加樣式更方便。

導(dǎo)入

作用

在一個less文件中引入多個css文件，可以減少html文件中的link標簽的數(shù)量(提高代碼的簡潔性)

在實際項目中會有多個css文件，導(dǎo)入的本質(zhì)就是將多個css文件合并到一個文件中

語法

@import “導(dǎo)入的文件名”;

注意：

文件名必須使用引號括起來

后面的分號不能省略

less后綴可以省略

👉 less文件中也可以引入css文件；如果引入時省略擴展名，則只能引入less文件，不會引入css文件。

響應(yīng)式布局與媒體查詢

響應(yīng)式布局

什么是響應(yīng)式布局

一個頁面適配多種終端(pc、移動端、平板)

響應(yīng)式布局的核心原理

根據(jù)不同的屏幕尺寸應(yīng)用不同的樣式。

示例網(wǎng)站：

經(jīng)典的響應(yīng)式布局站點：http://www.daqianduan.com/4614.html?tdsourcetag=s_pcqq_aiomsg

國內(nèi)經(jīng)典的響應(yīng)式布局網(wǎng)站：http://www.bootcss.com

響應(yīng)式布局的優(yōu)缺點

優(yōu)點：

全適配一套網(wǎng)頁代碼即可以適配pc端，也可以適配移動端，而不需要書寫多套頁面。

缺點：

由于一套網(wǎng)頁代碼即要能適配pc端，又要能適配移動端，那么這套代碼就必須同時包含pc端和移動端。只是在這一套代碼中根據(jù)不同的屏幕來應(yīng)用不同的代碼。

代碼量非常大，不利于后期維護。

響應(yīng)式布局的適用場景

適用

網(wǎng)頁結(jié)構(gòu)簡單：通常是一些專題類網(wǎng)站，例如：博客類，http://www.csdn.net ，技術(shù)類，http://www.bootcss.com、https://docs.golaravel.com

公司規(guī)模小

不適合

網(wǎng)頁結(jié)構(gòu)復(fù)雜：電端類網(wǎng)站這些網(wǎng)站結(jié)構(gòu)很復(fù)雜(京東、天貓、淘寶)，使用響應(yīng)式布局開發(fā)與維護都很困難。

公司規(guī)模大

如何區(qū)別一個網(wǎng)站是否采用的是響應(yīng)式

首先使用谷歌瀏覽器打開網(wǎng)站，再打開控制臺切換到移動端刷新網(wǎng)頁。如果前后網(wǎng)址一樣則表示采用的是響應(yīng)式布局。如果不一樣則表示并沒有采用響應(yīng)式，而是做了兩套頁面來適配pc端與移動端。

媒體查詢

媒體查詢是實現(xiàn)響應(yīng)式布局的根本技術(shù)。

什么是媒體查詢

媒體通常指的就是瀏覽網(wǎng)頁的設(shè)備的屏幕介質(zhì)。

媒體查詢是css3中新增的功能，css3的可以查詢到當前運行css代碼的屏幕的寬度，它的作用是可以根據(jù)不同的媒體類型定義不同的樣式。

👉 響應(yīng)式布局的關(guān)鍵點是根據(jù)不同的屏幕尺寸應(yīng)用不同的css樣式，那么瀏覽器上的css就要能夠識別此時此刻瀏覽網(wǎng)頁設(shè)備的屏幕尺寸信息。并判斷屏幕尺寸是否滿足css代碼中所定義的屏幕尺寸范圍，如果滿足就應(yīng)用樣式，不滿足就不應(yīng)用。

語法

@media 媒體類型 and (媒體特征){

? // css代碼

}

示例：

@media screen and (width:700px){ //樣式 }

? 當屏幕的寬度是700px時，應(yīng)用樣式

@media screen and (min-width:1000px){ //樣式 }

? 如果想應(yīng)用這個樣式屏幕寬度最小只能到1000px，換個角度講，大于1000px時應(yīng)用這個樣式

@media screen and (max-width:1200px){ //樣式 }

? 如果想應(yīng)用這個樣式屏幕寬度最大只能到1200px，換個角度講，小于1200px時應(yīng)用這個樣式。

@media screen and (min-width:1000px) and (max-width:1200){ //樣式 }

? 如果想應(yīng)用這個樣式屏幕寬度只能在100px與1200px之間。

說明

🔑 and 兩側(cè)必須有空格
媒體類型

值描述

screen	用于電腦屏幕、平板、智能手機
print	用于打印機
braille	盲文
embossed	盲文打印
handheld	手持設(shè)備
projection	項目演示，比如幻燈片
speech	演講
tty	固定字母間距的網(wǎng)格的媒體，比如電傳打字機
tv	電視
all	所有設(shè)備

👉 由于我們的頁面不需要考慮用戶打印，所以最常用的就是screen。

媒體特征

max-width 最大寬度

min-width 最小寬度

👉 媒體特征非常多，最常用的就是以上兩個。

簡寫語法

screen可以省略，例如： @media( 媒體特征)

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>Document</title><link rel="stylesheet" href=""><script></script><style>.box{height:100px;}/* 媒體查詢 *//* 標準語法 *//* width很少用，因為匹配的太精確 *//* @media screen and (width:600px){.box{background:cyan;}} *//* 范圍 *//* min-width:1200 尺寸最小為 1200 換句話講就是 >=1200max-width:1000 尺寸最大為 1000 換句話講就是 <=1000*//* // 大于1200@media screen and (min-width:1200px){.box{background:cyan;}}// 小于1000@media screen and (max-width:1000px){.box{background:gold;}} // 但于1200與1000之間@media screen and (max-width:1200px) and (min-width:1000px){.box{background:#ccc;}}*//* 省略screen *//* 瀏覽器上生效，打印時樣式不生效 *//* @media screen and (min-width:100px){.box{color:red;font-size: 30px;}} *//* 瀏覽器上生效，打印時也生效 */@media(min-width:100px){.box{color:red;font-size: 30px;}}</style> </head> <body><div class="box">hello</div> </body> </html>

👉 不要被媒體查詢的名子迷惑了，我們要作的并不是如何查詢到屏幕的尺寸，我們僅需要設(shè)置什么屏幕尺寸應(yīng)用什么樣式即可。至于css在瀏覽器上執(zhí)行時如何查詢到屏幕尺寸并應(yīng)用我們設(shè)置的樣式的工作是由瀏覽器完成的，和我們沒有關(guān)系。換句話講，我們僅是制目標，至于怎么實現(xiàn)是別人的事。

媒體查詢練習(xí)

首先明確：

? 響應(yīng)式有能力對任何尺寸的屏幕進行響應(yīng)式布局，但是由于屏幕的尺寸種類太多，所以做到面面具到是沒有太大意義。

? 實際開發(fā)中，我們僅關(guān)注4種尺寸。

設(shè)備類型屏幕范圍媒體查詢

大pc(桌面電腦、大屏筆記本)	大于等于1200	@media(min-width:1200px){}
pc(小屏筆記本)	大于等于 992 且小于 1200	@media(min-width:992px) and (max-width:1200){}
平板	大于等于768 且小于 992	@media(min-width:768px) and (max-width:992px){}
手機	小于768	@media(max-width:768px)

響應(yīng)式布局編碼順序簡介

先定義公共樣式(在屏幕上都不會改變的樣式)

再用媒體查詢，根據(jù)范圍定義不同的樣式

從大到小使用max-width

從小到大使用min-width

需求：

? 如果是大pc顯示4個盒子

? 如果是小pc顯示3個盒子

? 如果是平板顯示2個盒子

? 如果是手機顯示1個盒子

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>Document</title><link rel="stylesheet" href=""><script></script><style>/* 需求：如果是大pc顯示4個盒子如果是小pc顯示3個盒子如果是平板顯示2個盒子如果是手機顯示1個盒子*//* 1. 先定義公共樣式2. 再用媒體查詢，根據(jù)范圍定義不同的樣式*//* 1. 先定義公共樣式 */div{float:left;width:200px;height:200px;background:#e9e9e9;text-align: center;line-height: 200px;}/* 2. 再用媒體查詢，根據(jù)范圍定義不同的樣式 *//* 大pc */@media(min-width:1200px){div{width:23%;margin:1%;}}/* 小pc */@media(min-width:992px) and (max-width:1200px){div{width: 31.3%;margin: 1%;}}/* 平板 */@media(min-width:768px) and (max-width:992px){div{width: 45%;margin: 2.5%;}}/* 手機 */@media(max-width:768px){div{width: 90%;margin: 5%;}}</style> </head> <body><div></div><div></div><div></div><div></div> </body> </html>

過渡動畫

什么是過渡動畫

示例：使用hover實現(xiàn)位置變換

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin:0;padding:0;}.box{width:200px;height:200px;background:cyan;position: absolute;left:0;top:0;}.box:hover{left:100px;top:100px;}</style> </head> <body><div class="box"></div> </body> </html>

以上示例中盒子從0px位置瞬間移動到了100px位置，根本沒有看到中間的位置變化的過程。如果想看到中間位置變化的過程就是過渡動畫。

transition是復(fù)合屬性

transition屬性是一個復(fù)合屬性，復(fù)合屬性有多個派生子屬性，類似于background屬性、border屬性…

background 復(fù)合屬性。以下是background的派生子屬性(都是以background開頭)：

background-image

background-color

background-repeat

background-position

border 復(fù)合屬性。以下是border的派生子屬性(都是以border開頭)：

border-style

border-width

border-color

transition屬性介紹

transition-property

需要應(yīng)用過渡效果的屬性名

例如：width、top、color、background-color、all(表示所有屬性，使用的最多)

transition-duration

過渡效果持久的時間，單位：s(秒用的最多)、ms(毫秒)

例如：1s表示1秒 500ms表示500毫秒

👉 此屬性必須設(shè)置，因為默認是0, 0表示動畫的持續(xù)時間沒有，所以看不到效果。

transition-timing-function

過渡效果速度類型

常用ease，表示過渡效果的速度由慢變快，再由快降到慢。

transition-delay

過渡動畫開始之前等待的時間(延時時間)

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin:0;padding:0;}.box{width:200px;height:200px;left:0;top:0;background:cyan;position: absolute;/* transition-property：應(yīng)用過渡效果的屬性transition-duration：過渡效果持續(xù)的時間transition-timing-function: 過渡效果的時間曲線transition-delay: 動畫的延時時間(一般不使用)*//* transition-property: all;transition-duration: 1s;transition-timing-function: linear; transition-delay: 3s; *//* 使用復(fù)合屬性 */transition: all 1s linear 3s;}.box:hover{left:100px;top:100px;background: blue;}</style> </head> <body><div class="box"></div> </body> </html>

細節(jié)：

過渡動畫絕大多數(shù)是設(shè)置在初始狀態(tài)內(nèi)，而不是終止狀態(tài)內(nèi)設(shè)置。

如果多個屬性的動畫效果不一致，在復(fù)合屬性中要使用逗號分隔分開書寫(這種情況很少)。

例如：left屬性過渡效果要持續(xù)2秒，top屬性要持續(xù)3秒，background-color持續(xù)4秒

transition: left 2s linear,top 3s linear,background-color 4s;

transform2d變換

transform屬性介紹

? transform屬性主要用于實現(xiàn)平移、旋轉(zhuǎn)、縮放、傾斜效果，所以平移、旋轉(zhuǎn)、縮放、傾斜都是transform的屬性值。

常用的屬性值如下：

transform:translate()

變換效果

transform:rotate()

旋轉(zhuǎn)效果

transform:scale()

縮放效果

transform:skew()

傾斜效果(不常用)

translate 2d平移

css語法:

transform:translate(x,y)

說明：

以元素當前的位置為相對參照，進行水平、垂直方向移動。

x 表示水平方向移動，正數(shù)向右，負數(shù)向左

y 表示垂直方向移動，正數(shù)向下，負數(shù)向上

x、y的取值如果是百分比，則是相對于元素本身尺寸。

如果設(shè)置1個值，表示只進行水平平移。

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin:100px;}.box{width:100px;height:50px;background:cyan;}.box:hover{/* transform: translate(10px,20px); *//* 負值為反方向移動 */transform: translate(-10px,-20px);}</style> </head> <body><div class="box"></div> </body> </html>

案例：利用translate完美的實現(xiàn)元素的垂直居中，且自適應(yīng)父元素寬度。

思路：

利用定位，設(shè)置left:50%; top:50%;

定位的left、top是相對于父元素尺寸的，

會移多出一部分，而這部分正好是元素尺寸的一半

通過平移，讓元素向左向上拉回自身的一半

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin:0;}.box{width:300px;height:200px;background:cyan;/* 利用定位，設(shè)置left:10%; top:50%; */position: absolute;left: 50%;top: 50%;/* 利用平移 */transform:translate(-50%,-50%);}</style> </head> <body><div class="box"></div> </body> </html>

rotate 2d旋轉(zhuǎn)

css語法：

transform:rotate(角度)

說明：

角度的單位是 deg

角度值為正數(shù)，表示順時針旋轉(zhuǎn)

角度值為負數(shù)，表示逆時針旋轉(zhuǎn)

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* css語法：transform:rotate(角度)說明：角度的單位是 deg角度值為正數(shù)，表示順時針旋轉(zhuǎn)角度值為負數(shù)，表示逆時針旋轉(zhuǎn)*/*{margin:100px;}.box1, .box2{width:100px;height:100px;}.box1{background:cyan;/* 2d 旋轉(zhuǎn) */transform: rotate(30deg)}.box2{background:deepskyblue;/* 2d 旋轉(zhuǎn) */transform: rotate(-30deg)}</style> </head> <body><div class="box1">hello</div><div class="box2">world</div> </body> </html>

scale 2d縮放

css語法：

transform:scale(h,v)

說明：

h表示水平縮放比例

v表示垂直縮放比例

取值：

0-1之間縮小

大于1進行放大

小于0進行鏡向縮放

如果設(shè)置1個值，表示水平以及垂直同時縮放。

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{margin:100px;}.box1{width: 100px;height: 100px;background:cyan;/* 2d 放大 *//* 水平放大1.5倍，垂直不變 *//* transform: scale(1.5,1) *//* 水平放大1.5倍，垂直放大2部 *//* transform: scale(1.5,2); *//* 水平放大2倍，垂直放大2部 *//* transform:scale(2); *//* 2d 縮小 *//* transform:scale(.5); *//* 負數(shù)為縮放且鏡像 */transform:scale(2,-2)}</style> </head> <body><div class="box1">hello</div> </body> </html>

skew 2d傾斜(了解)

css語法：

transform: skew(xdeg,ydeg)

說明：

xdeg設(shè)置水平方向的傾斜角度

ydeg設(shè)置垂直方向的傾斜角度

如果設(shè)置一個值，僅表示水平傾斜

示例：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.wrap {height: 200px;width: 800px;margin: 100px auto;display: flex;justify-content: space-between;}.wrap div {width: 200px;height: 200px;background:#ccc;transition: all 2s;}.box1:hover{transform:skew(30deg,0);}.box2:hover{transform:skew(0,30deg);}.box3:hover{transform:skew(30deg,30deg);}</style> </head><body><div class="wrap"><div class="box1"></div><div class="box2"></div><div class="box3"></div></div> </body></html>

transform3d轉(zhuǎn)換

3d變換介紹

2d是平面，3d是空間

默認情況下，電腦屏幕是二維的并不是三維的。如果想實現(xiàn)三維效果，必須設(shè)置視距屬性(perspective)，讓css開啟3d效果的模擬。

👉 只要變換效果會呈現(xiàn)在垂直于電腦屏幕的方向就需要設(shè)置視距。

👉 視距就是眼睛與物體之間的距離。用于模擬3d中近大遠小的規(guī)則。

translatex\translatey\translatez 3d平移

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{/* */perspective: 900px;}.wrap {height: 200px;width: 800px;margin: 100px auto;display: flex;justify-content: space-between;background:red;}.wrap div {width: 200px;height: 200px;background:#ccc;transition: all 2s;}.box1:hover{transform:translatex(30px);}.box2:hover{transform:translatey(30px);}.box3:hover{/* 由于是z軸移動，呈現(xiàn)的是3d效果，所以需要設(shè)置視距 */transform:translatez(30px);}</style> </head><body><div class="wrap"><div class="box1"></div><div class="box2"></div><div class="box3"></div></div> </body></html>

👉 由于3d是包含2d的，所以translatex(x)與translatey(y)與transalte(x,y)實現(xiàn)的效果是一樣的。

rotatex\rotatey\rotatez 3d旋轉(zhuǎn)

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{margin:0 auto;perspective: 900px;}.wrap {height: 200px;width: 800px;margin: 100px auto;display: flex;justify-content: space-between;background:red;}.wrap div {width: 200px;height: 200px;background:#ccc;transition: all 2s;}.box1:hover{transform:rotatex(30deg);}.box2:hover{transform:rotatey(30deg);}.box3:hover{transform:rotatez(30deg);}</style> </head><body><div class="wrap"><div class="box1"></div><div class="box2"></div><div class="box3"></div></div> </body></html>

scalex\scaley\scalez 3d縮放

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{/* */perspective: 900px;}.wrap {height: 200px;width: 800px;margin: 100px auto;display: flex;justify-content: space-between;background:red;}.wrap div {width: 200px;height: 200px;background:#ccc;transition: all 2s;}.box1:hover{transform:scalex(.5);}.box2:hover{transform:scaley(.5);}.box3:hover{transform:scalez(.5);}</style> </head><body><div class="wrap"><div class="box1"></div><div class="box2"></div><div class="box3"></div></div> </body></html>

@keyframes幀動畫

@keyframes簡介

transition動畫存在的問題

動畫不能自動開始(現(xiàn)階段需要hover配合)

動畫次數(shù)固定1次，不能循環(huán)播放。

@keyframes動畫(幀動畫)

可以自動開始

次數(shù)不限

語法介紹

@keyframes動畫的使用流程

@keyframes定義動畫

css語法：

@keyframes 動畫名{

? from{

? // 開始css樣式

? }to{

? // 結(jié)束css樣式

? }

}

👉 當我們使用@keyframes定義好了一個動畫，它并不會執(zhí)行產(chǎn)生任何效果，直到我們通過animation屬性將動畫應(yīng)用到相應(yīng)元素上。

animation應(yīng)用動畫

css語法：

示例：

animation屬性詳解

animation-name

設(shè)置元素所要應(yīng)用的幀動畫

animation-duration

設(shè)置動畫持續(xù)的時間

animation-delay

設(shè)置動畫延時時間

animation-timing-function

設(shè)置動畫的效果速度類型(與transition-timing-function相同)

animation-fill-mode

常用的值為 forwards 動畫停止時，元素的樣式停留在最后一幀的樣式

animation-iteration-count

設(shè)置動畫播放的次數(shù)，取值：整數(shù)、infinite(無限播放)

animation-direction

指定動畫是否反向播放或交替播放，需要設(shè)置多次播放才有效果

取值：normal, reverse, alternate, alternate-reverse

normal 開頭 -> 結(jié)尾

reverse 結(jié)尾 -> 開頭

alternate 開頭 -> 結(jié)尾 -> 開頭 -> …

alternate-reverse 結(jié)尾 -> 開頭 -> 結(jié)尾 -> …

animation-play-state

paused 控制動畫暫停

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 50px;height: 50px;background:#ccc;/* border-radius: 5px; */margin: 100px auto;/* 應(yīng)用動畫 */animation-name:xuhuan;animation-duration:2s;/* animation-delay: 2s; *//* animation-timing-function: linear; *//* animation-fill-mode:forwards; */animation-iteration-count: infinite;animation-direction:alternate-reverse;}.box:hover{animation-play-state: paused;}/* 定義動畫 */@keyframes xuhuan{from{/* border-radius: 0px; */background:blue;transform:translateX(0);}to{transform:translateX(100px);/* transform:rotate(360deg); *//* border-radius: 50px; */}}</style> </head><body><div class="box"></div> </body></html>

百分比動畫

? from…to… 只能設(shè)置兩個動畫幀(兩種狀態(tài))，如果想控制多種狀態(tài)，可以使用百分比設(shè)置多個動畫幀。

css語法：

@keyframes 動畫名{

? 0%{

? // 樣式

? }

? n%{

? // 樣式

? }

? 100%{

? // 樣式

? }

}

示例：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin:0;padding:0;}.box{width: 50px;height: 50px;background: #ccc;animation: multi 3s linear alternate infinite;}@keyframes multi {0%{}20%{transform:translate(100px,0px);}40%{transform:translate(100px,100px) }60%{transform:translate(200px,100px) }80%{transform:translate(200px,200px) }100%{transform:translate(0px,200px) }}</style> </head> <body><div class="box"></div> </body> </html>

總結(jié)

以上是生活随笔為你收集整理的移动web知识总结（超详细）附带思维导图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： java7 rhino,Java 7 可
下一篇： swing打地鼠游戏_你还记得那个超级玛

编程问答

移动web知识总结（超详细）附带思维导图

移動web簡介

什么是移動web

如何調(diào)試移動web頁面

移動web發(fā)展歷程

移動端布局特點

移動web入門

視口(viewport)

移動端布局流程

布局的流程

注意事項

flex布局(彈性/伸縮布局)

彈性布局的三個組成部分

justify-content控制主軸的排列及分布

align-items控制次軸的排列及分布

flex-wrap主軸換行

align-content控制多行的排列及分布

子元素的屬性

更改軸的方向

彈性布局小結(jié)

rem布局

rem 與 em區(qū)別

rem的使用流程

vscode編輯器px to rem插件 或 cssrem

動態(tài)設(shè)置html標簽的font-size

Less(css預(yù)處理器)

Less介紹及開發(fā)環(huán)境的搭建

Less介紹

什么是預(yù)處理(預(yù)編譯)

Less開發(fā)環(huán)境的搭建

Less使用流程

Less的語法

變量

混入

嵌套

&符號

導(dǎo)入

響應(yīng)式布局與媒體查詢

響應(yīng)式布局

媒體查詢

媒體查詢練習(xí)

響應(yīng)式布局編碼順序簡介

過渡動畫

什么是過渡動畫

transition是復(fù)合屬性

transition屬性介紹

transform2d變換

transform屬性介紹

translate 2d平移

rotate 2d旋轉(zhuǎn)

scale 2d縮放

skew 2d傾斜(了解)

transform3d轉(zhuǎn)換

3d變換介紹

translatex\translatey\translatez 3d平移

rotatex\rotatey\rotatez 3d旋轉(zhuǎn)

scalex\scaley\scalez 3d縮放

@keyframes幀動畫

@keyframes簡介

@keyframes動畫的使用流程

@keyframes定義動畫

animation應(yīng)用動畫

animation屬性詳解

百分比動畫

總結(jié)

vscode編輯器px to rem插件或 cssrem