移動web開發之rem布局
rem基礎
rem機關
rem (root em)是一個相對機關，類似于em，em是父元素字型大小。
不同的是rem的基準是相對于html元素的字型大小。
比如，根元素（html）設定font-size=12px; 非根元素設定width:2rem; 則換成px表示就是24px。
/* 根html 為 12px */
html {
font-size: 12px;
}
/* 此時 div 的字型大小就是 24px */
div {
font-size: 2rem;
}
rem的優勢：父元素文字大小可能不一緻， 但是整個頁面隻有一個html，可以很好來控制整個頁面的元素大小。
媒體查詢
什麼是媒體查詢
媒體查詢（Media Query）是CSS3新文法。
- 使用 @media查詢，可以針對不同的媒體類型定義不同的樣式
- @media 可以針對不同的螢幕尺寸設定不同的樣式
- 當你重置浏覽器大小的過程中，頁面也會根據浏覽器的寬度和高度重新渲染頁面
- 目前針對很多蘋果手機、Android手機，平闆等裝置都用得到多媒體查詢
媒體查詢文法規範
- 用 @media開頭 注意@符号
- mediatype 媒體類型
- 關鍵字 and not only
- media feature 媒體特性必須有小括号包含
@media mediatype and|not|only (media feature) {
CSS-Code;
}
- mediatype 查詢類型
将不同的終端裝置劃分成不同的類型，稱為媒體類型
- 關鍵字
關鍵字将媒體類型或多個媒體特性連接配接到一起做為媒體查詢的條件。
- and：可以将多個媒體特性連接配接到一起，相當于“且”的意思。
- not：排除某個媒體類型，相當于“非”的意思，可以省略。
- only：指定某個特定的媒體類型，可以省略。
-
媒體特性
每種媒體類型都具體各自不同的特性，根據不同媒體類型的媒體特性設定不同的展示風格。我們暫且了解三個。
注意他們要加小括号包含
移動web開發之rem布局 -
媒體查詢書寫規則
注意： 為了防止混亂，媒體查詢我們要按照從小到大或者從大到小的順序來寫,但是我們最喜歡的還是從小到大來寫，這樣代碼更簡潔
移動web開發之rem布局 移動web開發之rem布局
補充:
less 基礎
維護css弊端
CSS 是一門非程式式語言，沒有變量、函數、SCOPE（作用域）等概念。
- CSS 需要書寫大量看似沒有邏輯的代碼，CSS 備援度是比較高的。
- 不友善維護及擴充，不利于複用。
- CSS 沒有很好的計算能力
- 非前端開發工程師來講，往往會因為缺少 CSS 編寫經驗而很難寫出組織良好且易于維護的 CSS 代碼項目。
Less 介紹
Less（LeanerStyle Sheets 的縮寫）是一門 CSS擴充語言，也成為CSS預處理器。
做為 CSS的一種形式的擴充，它并沒有減少CSS的功能，而是在現有的CSS文法上，為CSS加入程式式語言的特性。
它在CSS 的文法基礎之上，引入了變量，Mixin（混入），運算以及函數等功能，大大簡化了 CSS 的編寫，并且降低了 CSS的維護成本，就像它的名稱所說的那樣，Less可以讓我們用更少的代碼做更多的事情。
Less中文網址：http://lesscss.cn/
常見的CSS預處理器：Sass、Less、Stylus
一句話：Less是一門 CSS 預處理語言，它擴充了CSS的動态特性。
Less安裝
①安裝nodejs，可選擇版本(8.0)，網址：http://nodejs.cn/download/
②檢查是否安裝成功，使用cmd指令（win10是window+r 打開運作輸入cmd） ---輸入“node –v”檢視版本即可
③基于nodejs線上安裝Less，使用cmd指令“npm install -g less”即可
④檢查是否安裝成功，使用cmd指令“ lessc -v ”檢視版本即可
Less 使用之變量
變量是指沒有固定的值，可以改變的。因為我們CSS中的一些顔色和數值等經常使用。
@變量名:值;
- 必須有@為字首
- 不能包含特殊字元
- 不能以數字開頭
- 大小寫敏感
@color: pink;
Less 編譯 vocode Less 插件
Easy LESS 插件用來把less檔案編譯為css檔案
安裝完畢插件，重新加載下 vscode。
隻要儲存一下Less檔案，會自動生成CSS檔案。
Less 嵌套
// 将css改為less
#header .logo {
width: 300px;
}
#header {
.logo {
width: 300px;
}
}
如果遇見 （交集|僞類|僞元素選擇器） ，利用&進行連接配接
a:hover{
color:red;
}
a{
&:hover{
color:red;
}
}
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字型大小變化元素尺寸也會發生變化，進而達到等比縮放的适配。
技術方案：
1.less+rem+媒體查詢
2.lflexible.js+rem
總結：
兩種方案現在都存在。
方案2 更簡單，現階段大家無需了解裡面的js代碼。
rem實際開發适配方案1
①假設設計稿是750px
②假設我們把整個螢幕劃分為15等份（劃分标準不一可以是20份也可以是10等份）
③每一份作為html字型大小，這裡就是50px
④那麼在320px裝置的時候，字型大小為320/15就是 21.33px
⑤用我們頁面元素的大小除以不同的 html字型大小會發現他們比例還是相同的
⑥比如我們以750為标準設計稿
⑦一個100100像素的頁面元素在 750螢幕下， 就是 100/ 50 轉換為rem 是 2rem2rem 比例是1比1
⑧320螢幕下， html字型大小為21.33 則 2rem= 42.66px 此時寬和高都是 42.66 但是寬和高的比例還是 1比1
⑨但是已經能實作不同螢幕下 頁面元素盒子等比例縮放的效果
總結：
①最後的公式：頁面元素的rem值 = 頁面元素值（px） / （螢幕寬度 / 劃分的份數）
②螢幕寬度/劃分的份數就是 htmlfont-size 的大小
③或者：頁面元素的rem值 = 頁面元素值（px） / html font-size 字型大小
蘇甯首頁
蘇甯首頁位址 ：蘇甯首頁
1、 技術選型
方案：我們采取單獨制作移動頁面方案
技術：布局采取rem适配布局（less + rem + 媒體查詢）
設計圖： 本設計圖采用 750px 設計尺寸
2、搭建檔案結構
3、設定視口标簽以及引入初始化樣式
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
4、設定公共common.less檔案
- 建立common.less 設定好最常見的螢幕尺寸，利用媒體查詢設定不同的html字型大小，因為除了首頁其他頁面也需要
- 我們關心的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
- 劃分的份數我們定為 15等份
- 因為我們pc端也可以打開我們蘇甯移動端首頁，我們預設html字型大小為 50px，注意這句話寫到最上面
rem 适配方案2
手機淘寶團隊出的簡潔高效 移動端适配庫
我們再也不需要在寫不同螢幕的媒體查詢，因為裡面js做了處理
它的原理是把目前裝置劃分為10等份，但是不同裝置下，比例還是一緻的。
我們要做的，就是确定好我們目前裝置的html 文字大小就可以了
比如目前設計稿是 750px， 那麼我們隻需要把 html 文字大小設定為 75px(750px / 10) 就可以
裡面頁面元素rem值： 頁面元素的px 值 / 75
剩餘的，讓flexible.js來去算
github位址：https://github.com/amfe/lib-flexible
因為flexible是預設将螢幕分為10等分
但是當螢幕大于750的時候希望不要再去重置html字型了
是以要自己通過媒體查詢設定一下
并且要把權重提到最高
VSCode px 轉換rem 插件 cssrem