rem適配佈局

一、rem基礎

rem單位

• rem (root em)是一個相對單位 ,相似於em , em是父元素字體大小。

• 不一樣的是rem的基準是相對於html元素的字體大小。

• 好比,根元素( html)設置font -size= 12px;非根元素設置width:2rem;則換成px表示就是24px。

• rem的優勢就是能夠經過修改html裏面的文字大小來改變頁面中元素的大小，能夠總體控制

二、媒體查詢

2.1什麼是媒體查詢

媒體查詢( Media Query )是CSS3新語法。

• 使用 @media查詢,能夠針對不一樣的媒體類型定義不一樣的樣式

• @media 能夠針對不一樣的屏幕尺寸設置不一樣的樣式

• 當你重置瀏覽器大小的過程當中 ,頁面也會根據瀏覽器的寬度和高度從新渲染頁面

• 目前針對不少蘋果手機、 Android手機 ,平板等設備都用獲得多媒體查詢

2.2語法規範

@media mediatype and | not lonly (media feature) {

　　CSS-Code ;  //css樣式代碼

}

• 用@media開頭注意 @符號

• mediatype 媒體類型

• 關鍵字and not only

• media feature媒體特性必須有小括號包含

 

一、mediatype查詢類型

將不一樣的終端設備劃分紅不一樣的類型,稱爲媒體類型

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

2.關鍵字

關鍵字將媒體類型或多個媒體特性鏈接到一塊兒作爲媒體查詢的條件。

• and: 能夠將多個媒體特性鏈接到一塊兒,至關於"且" 的意思。

• not: 排除某個媒體類型,至關於「非」的意思，能夠省略。

• only :指定某個特定的媒體類型,能夠省略。

3.媒體特性

每種媒體類型都具體各自不一樣的特性,根據不一樣媒體類型的媒體特性設置不一樣的展現風格。咱們暫且瞭解三個。 注意他們要加小括號包含

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

注意:爲了防止混亂,媒體查詢咱們要按照從小到大或者從大到小的順序來寫,可是咱們最喜歡的仍是從小到大來寫, 這樣代碼更簡潔

2.3媒體查詢+ rem實現元素動態大小變化

rem單位是跟着html來走的，有了rem頁面元素能夠設置不一樣大小尺寸， 媒體查詢能夠根據不一樣設備寬度來修改樣式 媒體查詢+ rem就能夠實現不一樣設備寬度,實現頁面元素大小的動態變化

2.4引入資源(理解)

當樣式比較繁多的時候,咱們能夠針對不一樣的媒體使用不一樣stylesheets (樣式表)。 原理,就是直接在link中判斷設備的尺寸,而後引用不一樣的css文件。

 <link rel="stylesheet" href="320px.css" media="screen and (min-width: 320px)">

三、Less基礎

3.1維護css的弊端

CSS是一門非程序式語言,沒有變量、函數、SCOPE (做用域)等概念。

• CSS 須要書寫大量看似沒有邏輯的代碼, CSS冗餘度是比較高的。

• 不方便維護及擴展,不利於複用。

• CSS沒有很好的計算能力

• 非前端開發工程師來說 ,每每會由於缺乏CSS編寫經驗而很難寫出組織良好且易於維護的CSS代碼項目。

3.2 Less介紹

Less ( Leaner Style Sheets的縮寫)是一門CSS擴展語言,也稱爲CSS預處理器。

作爲CSS的一種形式的擴展,它並無減小CSS的功能,而是在現有的CSS語法上,爲CSS加入程序式語言的特性。

它在CSS的語法基礎之上,引入了變量, Mixin (混入) , 運算以及函數等功能,大大簡化了CSS的編寫,而且下降了CSS的維護成本,

就像它的名稱所說的那樣, Less可讓咱們用更少的代碼作更多的事情。

Less中文網址: http://lesscss.cn/

常見的CSS預處理器: Sass、Less、 Stylus

3.3 Less使用

咱們首先新建一個後綴名爲less的文件 ,在這個Iess文件裏面書寫less語句。

• Less 變量

• Less 編譯

• Less 嵌套

• Less運算

3.4 Less變量

變量是指沒有固定的值,能夠改變的。由於咱們CSS中的一些顏色和數值等常用。

變量定義：

@變量名:值;

1.變量命名規範：

• 必須有 @爲前綴

• 不能包含特殊字符

• 不能以數字開頭

• 大小寫敏感

// 定義變量

@color: deeppink;

body {

    // 引用變量

    background-color: @color;

}

3.5 Less編譯

本質上，Less包含一套自定義的語法及一個解析器,用戶根據這些語法定義本身的樣式規則,這些規則 最終會經過解析器,編譯生成對應的CSS文件。 因此,咱們須要把咱們的less文件, 編譯生成爲css文件,這樣咱們的html頁面才能使用。

vocode Less插件

Easy LESS插件用來把less文件編譯爲Css文件 安裝完畢插件,從新加載下vscode. 只要保存一下Less文件,就會會自動生成CSS文件。

3.6 Less嵌套

咱們常常用到選擇器的嵌套

#header .logo {

　　width: 300px;

}

Less嵌套寫法

#header {

.Iogo {

 　　width: 300px;

　　}

}

若是碰見(交集|僞類|僞元素選擇器)

• 內層選擇器的前面沒有 &符號,則它被解析爲父選擇器的後代;

• 若是有&符號,它就被解析爲父元素自身或父元素的僞類。

css寫法：

a:hover{

　　color: red;

}

Less嵌套寫法：

a{

　　&:hover

　　{

　　 color: red;

　　}

}

3.7 Less運算★

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

//Less裏面寫

@witdh: 10px +5;

div {

　　 border: @witdh solid red;

}

//生成的css

div {

　　 border: 15px solid red;

}

Less甚至還能夠這樣:

width: (@width + 5) * 2;

注意:

• 乘號(* )和除號(/)的寫法

• 運算符中間左右有個空格隔開1px + 5

• 對於兩個不一樣的單位的值之間的運算 ,運算結果的值取第一個值的單位

• 若是兩個值之間只有一個值有 單位,則運算結果就取該單位

四、rem適配方案

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

2.使用媒體查詢根據不一樣設備按比例設置html的字體大小，而後頁面元素使用rem作尺寸單位，當html字體大小變化，元素尺寸也會發生變化，從而達到等比縮放的適配。

4.1 rem實際開發適配方案

①按照設計稿與設備寬度的比例，動態計算並設置html根標籤的font-size大小; ( 媒體查詢)

②CSS中,設計稿元素的寬、高、相對位置等取值,按照同等比例換算爲rem爲單位的值;

4.2 rem適配方案技術使用(市場主流)

技術方案1

• rem

• 媒體查詢

• less

 

技術方案2 (推薦)

• flexible.js

• rem

rem實際開發適配方案1

一、設計稿常見尺寸寬度

設備	常見寬度
iphone 4.5	640px
iphone 678	750px
Android	常見320px、360px、 375px、 384px、 400px、 414px 500px、 720px 大部分4.7~5寸的安卓設備爲720px

通常狀況下,咱們以一套或兩套效果圖適應大部分的屏幕,放棄極端屏或對其優雅降級, 犧牲一些效果。 如今基本以750爲準。

2.動態設置html標籤font-size大小

①假設設計稿是750px

②假設咱們把整個屏幕劃分爲15等份 (劃分標準不一，能夠是20份也能夠是10等份)

③每一份做爲html字體大小,這裏就是50px

④那麼在320px設備的時候 ,字體大小爲320/15就是21.33px

⑤用咱們頁面元素的大小除以不一樣的html字體大小會發現他們比例仍是相同的

⑥好比咱們以750爲標準設計稿

⑦一個100*100像素的頁面元素在750屏幕下，就是100/ 50轉換爲rem是2rem * 2 rem比例是1比1

⑧320屏幕下 ，html 字體大小爲21.33，則2rem = 42.66px，此時寬和高都是42.66，可是寬和高的比例仍是1比1

⑨可是已經能實現不一樣屏幕下頁面元素盒子等比例縮放的效果

3.元素大小取值方法

①最後的公式：頁面元素的rem值=頁面元素值(px) / ( 屏幕寬度/劃分的份數)

②屏幕寬度 / 劃分的份數  就是 html font-size 的大小

③或者：頁面元素的rem值 = 頁面元素值( px) / html font-size字體大小