Sass Scss基礎 rem與px的自動轉換

2021-07-28 23:08:21 字數 1674 閱讀 8611

在css中，實現px和rem轉換非常簡單，但每次使用都需進行計算。雖然在html中設定font-size:62.5%即16px*62.5%=10px;會給大家帶來便利，但終究有些煩人，也不是長遠之計。另外，google瀏覽器中文預設字型大小為12px。既然我們學習了sass，就應該思考如何讓sass來幫助我們做這些計算的工作。接下來介紹如何使用sass實現px和rem之間的計算。

根據rem的使用原理，可以知道px轉rem需要在html根元素設定乙個font-size值，因為rem是相對於html根元素。

$browser


-default


-font


-size: 16px !default;//變數的值可以根據自己需求定義


html 


@function pxtorem($px)
定義好@function之後，實際使用中就簡單多了：

//scss


html 


.header 


//css


html 


.header
$browser


-default


-font


-size: 16px !default;//變數的值可以根據自己需求定義


html 


@mixin font-size($target)
在實際使用中，可以通過@include呼叫定義好的@mixin font-size:

//scss


.footer 


//css


.footer
可實際中，這個mixin太弱小了，根本無法實現我們需要的效果，因為我們很多樣式屬性中他可不只乙個屬性。為了實現多個屬效能設定多值，就需要對mixin做出功能擴充套件：

@mixin remcalc($property, $values...) px;


@if$i< $max ;}} 


@for


$i from 1 through $max rem;


@if$i< $max ;}} 


#: $pxvalues; 


#: $remvalues; 


}
在這個remcalc()中定義了兩個引數pr

oper

ty和 values…。其中pr

oper

ty表示

的是樣式

屬性，而

values…表示乙個或者多個屬性值。

px轉rem的mixin定義完成後，就可以通過@include來引用：

//scss


@include


remcalc(width,45);


@include


remcalc(margin,1,.5,2,3);


}//css


width


: 720px;


width


: 45rem;


margin


: 16px 8px 32px 48px;


margin


: 1rem 0.5rem 2rem 3rem; }
在實際使用中取值有一點非常重要在remcalc()取的$values值為rem值。

rem基礎布局

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

Scss基礎 rem與px的自動轉換

在css中，實現px和rem轉換非常簡單，但每次使用都需進行計算。雖然在html中設定font size 62.5 即16px 62.5 10px 會給大家帶來便利，但終究有些煩人，也不是長遠之計。另外，google瀏覽器中文預設字型大小為12px。既然我們學習了scss，就應該思考如何讓scss來...

rem與em的區別 結合使用rem與em

注意 谷歌瀏覽器最低支援的font size為12px 火狐和ie瀏覽器沒限制 rem 作用 適用不同解析度的頁面 相對於根元素html 給html設定乙個font size 所有元素的長度單位都用rem 倍數關係 若html設定的font size 10px 那麼2rem就是20px 好處 不同解...