rem佈局
rem佈局的原理
就是根據不同的屏幕大小來實現等比縮放
方法：
根據不同的屏幕大小來設計html根元素字體大小
rem單位
rem相對於html元素的font-size動態計算的單位
優點可以通過修改html的font-size大小整體控制元素的大小
如果html元素的font-size:12px, 其他元素的width:2rem;那麼換算成px就是24px;
媒體查詢(Media Query)
主要用screen、 all、print2個屬性不用
@media根據不同的屏幕尺寸改變不同的樣式
媒體查詢語法規範
用 @media開頭 注意@符號
mediatype 媒體類型
關鍵字 and not only
media feature 媒體特性必須有小括號包含
語法
@media mediatype and|not|only (media feature) {
CSS-Code;
}
建議:爲了防止混亂、媒體尺寸儘量從小往大寫
less的使用
less是一門預處理語言、擴展css動態特性
語法：@變量名：值；
變量指的是沒有固定的值、可以改變的量
規範：
必須有@爲前綴
不能包含特殊字符
不能以數字開頭
大小寫敏感
less嵌套
less語句是寫在父元素裏的
如果遇見（交集|僞類|僞元素選擇器）、利用&進行連接
&就是自己本身、或者父元素的僞類
(沒有&）空格是後代
less運算
乘號（*）和除號（/）的寫法
運算符中間左右有個空格隔開 1px + 5
對於兩個不同的單位的值之間的運算，運算結果的值取第一個值的單位
如果兩個值之間只有一個值有單位，則運算結果就取該單位
運算符的左右必須敲一個空格隔開
總結：就是從左到右以第一個單位爲準
rem=（標準尺寸除以固定的份數）/html文字的大小