移動端rem適應布局
-
rem
- rem（root em）是一個相對單位，類似于em，em是父元素字體大小，
- 不同的是rem的基準是相對于html元素的字體大小，
- 比如，根元素（html）設定font-size=12px；非根元素設定width：2rem；則換成px表示24px
-
媒體查詢
- 使用@media查詢，可以針對不同的媒體型別定義不同的樣式
- @media可以針對不同的螢屏尺寸設定不同的樣式
- 當你重置瀏覽器大小的程序，頁面也會根據瀏覽器的寬度和高度重新渲染頁面
- 目前針對很多蘋果手機，Android，平板等設備都用得到多媒體查詢
- 語法規范
@media mediatype and|not|only(media feature) { CSS-Code }- 媒體型別
值 解釋說明 all 用于所有設備 print 用于列印機和列印預覽 scree 用于電腦螢屏，平板電腦，智能手機 -
關鍵字
- and：可以將多個媒體特性連接到一起，相當于“且”的意思
- not：排除某個媒體型別，相當于“非”的意思，可以省略
- only：指定某個特定媒體型別，可以省略
-
媒體特性
-
【注意】要用小括號進行包含
值 解釋說明 width 定義輸出設備中頁面可見區域的寬度 min-width 定義輸出設備中頁面最小可見區域寬度 max-width 定義輸出設備中頁面最大可見區域寬度
-
-
less介紹
-
Less是一門CSS擴展性語言，也稱為CSS預處理，作為哦CSS的一種形式的擴展，他并沒有減少CSS的功能，而是在現有的CSS語法上，為CSS加入程式式語言特性，
-
他在CSS的語法基礎上，引入了變數，Mixin（混入），運算以及函式等功能，大大簡化了CSS的撰寫，并且降低了CSS的維護成本，
-
網址：http://lesscss.cn
-
常見前處理器：Sass，Less，Stylus
-
Less使用
-
首先新建一個后綴名為less的檔案，在這個less檔案里面書寫less陳述句
-
Less變數
-
變數是指沒有固定的值，可以改變的，
-
@變數名：值 -
命名規范
- 必須有@為前綴
- 不能包含特殊字符
- 不能以數字開頭
- 大小寫敏感
-
-
Less編譯
-
Less嵌套
-
Less運算
-
-
-
Less編譯
- vocode Less插件
- Easy LESS插件用來把less檔案編譯為css檔案
-
Less嵌套
- 內層選擇器的前面沒有&符號，則他被決議為父選擇器的后代
- 如果有&符號，他就被決議為父元素自身或者父元素的偽類
-
Less運算
- 乘號（*）和除號（/）的寫法
- 運算子中間左右有個空格隔開
- 對于兩個不同的單位的值之間的運算，運算結果的值取第一個值的單位
- 如果兩個值之間只有一個值有單位，則運算結果就取該單位
-
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/95275.html
標籤：Html/Css