移動Web開發 rem布局 less

2021-10-22 01:49:08 字數 984 閱讀 9980

rem單位:rem (root em)是乙個相對單位,是相對於html元素的字型大小

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

@media mediatype and (

)

1.查詢型別

2.關鍵字

3.**特性

4.**查詢書寫規則

為了防止混亂,**查詢我們要按照從小到大或者從大到小的順序來寫,但是我們最喜歡的還是從小到大來寫,這樣**更簡潔

@media screen and (

max-width

: 800px)

}

新建乙個.less檔案

1. less 變數

@變數名

: 值;

@color

: pink;

body

2. less 編譯

easy less 外掛程式用來把less檔案編譯為css檔案

3. less 巢狀

less書寫方式

/* 巢狀式 */

.header

}/*(交集|偽類|偽元素選擇器) ,利用 & 進行連線 */

a}

4. less 運算

數字、顏色或者變數都可以參與運算,less提供了加(+)、減(-)、乘(*)、除(/)算術運算

@witdh

: 10px + 5;

div

移動web開發 rem布局

rem單位 rem root em 是乙個相對單位,類似於em,em是父元素字型大小。不同的是rem的基準是相對於html元素的字型大小。比如,根元素 html 設定font size 12px 非根元素設定width 2rem 則換成px表示就是24px。根html 為 12px html 此時 ...

移動web開發之rem布局

理論基礎 什麼是rem?fontsize of the root elelment 說白了就是字型單位,是指相對於根元素的字型大小的單位。rem的優點 相對於流式布局 響應式布局等布局方式,rem更為靈活,可以根據根不同螢幕尺寸上的根元素來等比例適配。rem的基準值 根元素的字型大小 而網頁的根元素...

03 移動WEB開發 rem布局

rem root em 是乙個相對單位 and not only 關鍵字 media feature 特性,必須用小括號包含 示範 media mediatype and not only media feature media screen and max width 640px 當螢幕大於320...