移動web開發之rem布局和less的相關

2021-09-29 07:50:00 字數 1985 閱讀 9739

rem (root em)是乙個相對單位,類似於em,em是父元素字型大小。

不同的是rem的基準是相對於html元素的字型大小。

rem的優勢:父元素文字大小可能不一致, 但是整個頁面只有乙個html,可以很好來控制整個頁面的元素大小。

**查詢(media query)是css3新語法。

@media mediatype and|not|only (media feature)
mediatype 查詢型別

將不同的終端裝置劃分成不同的型別,稱為**型別

all 用於所有的裝置、

print 用於印表機和列印預覽

scree 用於電腦螢幕、平板電腦、智慧型手機等。

關鍵字

關鍵字將**型別或多個**特性連線到一起做為**查詢的條件。
**特性

每種**型別都具體各自不同的特性,根據不同**型別的**特性設定不同的展示風格。我們暫且了解三個。

注意他們要加小括號包含

**查詢書寫規則

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

css 是一門非程式式語言,沒有變數、函式、scope(作用域)等概念。

less(leanerstyle sheets 的縮寫)是一門 css擴充套件語言,也成為css預處理器。

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

它在css 的語法基礎之上,引入了變數,mixin(混入),運算以及函式等功能,大大簡化了 css 的編寫,並且降低了 css的維護成本,就像它的名稱所說的那樣,less可以讓我們用更少的**做更多的事情。

變數是指沒有固定的值,可以改變的。因為我們css中的一些顏色和數值等經常使用。

@變數名:值;
less 編譯 vocode less 外掛程式

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

只要儲存一下less檔案,會自動生成css檔案。

// 將css改為less

#header .logo

#header

}

如果遇見 (交集|偽類|偽元素選擇器) ,利用&進行連線

a:hover

a}

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

/*less 裡面寫*/

@witdh: 10px + 5;

div

/*生成的css*/

div

/*less 甚至還可以這樣 */

width: (@width + 5) * 2;

1.讓一些不能等比自適應的元素,達到當裝置尺寸發生改變的時候,等比例適配當前裝置。

2.使用**查詢根據不同裝置按比例設定html的字型大小,然後頁面元素使用rem做尺寸單位,當html字型大小變化元素尺寸也會發生變化,從而達到等比縮放的適配。

總的來說就是把以前的px等單位換成rem.

@media screen and (min-width: 320px) 

}@media screen and (min-width: 750px)

}div

/* 1. 首先我們選一套標準尺寸 750為準

2. 我們用螢幕尺寸 除以 我們劃分的份數 得到了 html 裡面的文字大小 但是我們知道不同螢幕下得到的文字大小是不一樣的 */

/* 3. 頁面元素的rem值 = 頁面元素在 750畫素的下px值 / html 裡面的文字大小 */

移動web開發之rem布局

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

移動web開發 rem布局

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

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...