移動端rem適應佈局

移動端rem適應佈局

1. rem

   • rem（root em）是一個相對單位，相似於em，em是父元素字體大小。
   • 不一樣的是rem的基準是相對於html元素的字體大小。
   • 好比，根元素（html）設置font-size=12px；非根元素設置width：2rem；則換成px表示24px

2. 媒體查詢

   • 使用@media查詢，能夠針對不一樣的媒體類型定義不一樣的樣式
   • @media能夠針對不一樣的屏幕尺寸設置不一樣的樣式
   • 當你重置瀏覽器大小的過程，頁面也會根據瀏覽器的寬度和高度從新渲染頁面
   • 目前針對不少蘋果手機，Android，平板等設備都用獲得多媒體查詢
   • 語法規範

   @media mediatype and|not|only(media feature)
   {
   CSS-Code
   }

   • 媒體類型

   值	解釋說明
   all	用於全部設備
   print	用於打印機和打印預覽
   scree	用於電腦屏幕，平板電腦，智能手機

   • 關鍵字

     • and：能夠將多個媒體特性鏈接到一塊兒，至關於「且」的意思
     • not：排除某個媒體類型，至關於「非」的意思，能夠省略
     • only：指定某個特定媒體類型，能夠省略

   • 媒體特性

     • 【注意】要用小括號進行包含

       值	解釋說明
       width	定義輸出設備中頁面可見區域的寬度
       min-width	定義輸出設備中頁面最小可見區域寬度
       max-width	定義輸出設備中頁面最大可見區域寬度

3. 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運算

     • 乘號（*）和除號（/）的寫法
     • 運算符中間左右有個空格隔開
     • 對於兩個不一樣的單位的值之間的運算，運算結果的值取第一個值的單位
     • 若是兩個值之間只有一個值有單位，則運算結果就取該單位