移動web開發之rem適配佈局
方案：
-
頁面佈局文字能否隨著螢幕大小變化而變化
-
流式佈局和flex佈局主要針對於寬度佈局，那高度如何佈局？
-
怎樣讓螢幕發生變化的時候元素高度和寬度等比例縮放？
1. rem基礎
rem單位
rem(root em)是一個相對單位，類似於em,em是父元素字型大小。
不同的是rem的基準是相對於html元素的字型大小。
比如，根元素(html)設定font-size=12px;非根元素設定width:2rem;則換成px表示就是24px.
<body>
<div>
<p></p>
</div>
<style>
html {
font-size: 14px;
}
div {
/* font-size: 12px; */
width: 10rem;
height: 10rem;
background-color: blueviolet;
}
p {
/* 1.em相對於父元素 的字型大小來說的 */
/* width: 10em;
height: 10em; */
/* 2.rem相對於html元素的字型大小來說的 */
width: 10rem;
background-color: aqua;
/* 3.rem的優點就是可以通過修改html裡面的文字大小來改變頁面中元素的大小 可以整體控制 */
}
</style>
2.媒體查詢
2.1什麼是媒體查詢
媒體查詢(Media Query)是css3新語法。
-
使用@media查詢，可以針對不同的媒體型別定義不同的樣式
-
@media可以針對不同的螢幕尺寸設定不同的樣式
-
當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面
-
目前針對很多蘋果手機、android手機、平板等裝置都用得到多媒體查詢
2.2語法規範
<style>
/* 這句話的意思是：在我們螢幕上 並且 最大的寬度是 800畫素 設定我們想要的樣式 */
@media screen and (max-width: 800px) {
body {
/* 當max-width 小於等於800畫素時螢幕顯示pink色*/
background-color: pink;
}
}
/* 媒體查詢可以根據不同的螢幕尺寸在改變不同的樣式 */
@media screen and (max-width: 500px) {
body {
background-color: red;
}
}
</style>
-
用@media開頭 注意@符號
-
mediatype媒體型別
-
關鍵字 and not only
-
media feature 媒體特性 必須有小括號包含
1.mediatype查詢型別
將不同的終端裝置劃分成不同的型別，稱為媒體型別
| 值 | 解釋說明 |
|---|---|
| all | 用於所有裝置 |
| 用於印表機和列印預覽 | |
| screen | 用於電腦螢幕、平板電腦、智慧手機 |
2.關鍵字
關鍵字將媒體型別或多個媒體特性連線到一起做為媒體查詢的條件。
-
and:可以將多個媒體特性連線到一起，相當於“且”的意思。
-
not：排除某個媒體型別，相當於“非”的意思，可以省略。
-
only：指定某個特定的媒體型別，可以省略
3.媒體特性
每種媒體型別都是具有各自不同的特性，根據不同媒體型別的媒體特性設定不同的展示風格。我們暫且瞭解三個。
注意他們要加小括號包含
| 值 | 解釋說明 |
|---|---|
| width | 定義輸出裝置中頁面可見區域的寬度 |
| min-width | 定義輸出裝置中頁面最小可見區域寬度 |
| max-width | 定義輸出裝置中頁面最大可見區域寬度 |
2.3媒體查詢+rem實現元素動態大小變化
-
rem單位是跟著html來走的，有了rem頁面元素可以設定不同大小尺寸
-
媒體查詢可以根據不同裝置寬度來修改樣式
-
媒體查詢+rem就可以實現不同裝置寬度，實現頁面元素大小的動態變化
案例：
<style>
* {
margin: 0;
padding: 0;
}
@media screen and (min-width: 320px) {
html {
font-size: 50px;
}
}
@media screen and (min-width: 640px) {
html {
font-size: 100px;
}
}
.top {
height: 1rem;
line-height: 1rem;
font-size: .5rem;
background-color: green;
color: #ffffff;
text-align: center;
}
</style>
<body>
<div class="top">購物車</div>
</body>
2.4引入資源（瞭解）
當樣式比較繁多的時候，我們可以針對不同的媒體使用不同的stylesheets(樣式表)
原理，就是直接在link中判斷裝置的尺寸，然後引用不同的css檔案。
1.語法規範
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
案例
分析：
-
當我們螢幕大於等於640px以上的，我們讓div一行顯示兩個
-
當我們螢幕小於640px以上的，我們讓div一行顯示一個
-
建議：我們媒體查詢最好的方法是從小到大
-
引入資源就是針對不同的螢幕尺寸呼叫不同的css檔案
<head>
<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">
</head>
<body>
<div>1</div>
<div>2</div>
</body>
/* style640.css */
div {
float: left;
width: 50%;
height: 100px;
}
div:nth-child(1){
background-color: pink;
}
div:nth-child(2){
background-color: purple;
}
/* style320.css */
div {
width: 100%;
height: 100px;
}
div:nth-child(1){
background-color: pink;
}
div:nth-child(2){
background-color: purple;
}
3.Less基礎
3.1維護css的弊端
css是一門非程式式語言，沒有變數、函式SCOPE(作用域)等概念
-
css需要書寫大量看似沒有邏輯的程式碼，css冗餘度是比較高的
-
不方便維護及擴充套件，不利於複用
-
css沒有很好的計算能力
-
非前端開發工程師來講，往往會因為缺少css編寫經驗而很難寫出組織良好且易於維護的css程式碼專案。
3.2Less介紹
-
Less (Leaner Style Sheets的縮寫) 是一門css擴充套件語言，也成為css前處理器。
-
作為CSS的一種形式的擴充套件，它並沒有減少CSS的功能，而是在現有的css語法上，為CSS加入程式式語言的特性。
-
它在CSS的語法基礎之上，引入了變數，Mixin（混入），運算以及函式等功能，大大簡化了CSS的編寫，並且降低了CSS的維護成本，就像它的名稱所說的那樣，Less可以讓我們用更少的程式碼做更多的事情。
Less中文網址：http://lesscss.cn/
常見的CSS前處理器：Sass、Less、Stylus
一句話：Less是一門css預處理語言，它擴充套件了css的動態新特性。
3.3 Less使用
我們首先新建一個字尾名為less的檔案，在這個less檔案裡面書寫less語句。
-
Less變數
-
Less編譯
-
Less巢狀
-
Less運算
3.4 Less變數
變數是指沒有固定的值，可以改變的。因為我們CSS中的一些顏色和數值等經常使用。
@變數名：值；
1.變數名規範
-
必須有@為字首
-
不能包含特殊字元
-
不能以數字開頭
-
大小寫敏感
3.5 Less編譯
本質上，Less包含一套自定義的語法及一個解析器，使用者根據這些語法定義自己的樣式規則，則這些規則最終會通過解析器，編譯生成對應的CSS檔案。
所以，我們需要把我們的less檔案，編譯生成css檔案，這樣我i們的html頁面才能使用。
vocode Less外掛
Easy LESS外掛用來把less檔案編譯為css檔案
安裝完畢外掛，重新載入下vscode，會自動生成css檔案。
3.6 Less巢狀
我們經常用到選擇器的巢狀
header .logo {
width:300px;
}
Less巢狀寫法
header {
.logo {
width:300px;
}
}
如果遇見（交集|偽類|偽元素選擇器）
-
內層選擇器的前面沒有&符號，則它被解析為父選擇器的後代
-
如果有&符號，它就被解析為父元素自身或者父元素的偽類。
a:hover {
color:red;
}
less巢狀寫法
a {
&:hover {
color:red;
}
}
3.7Less運算
任何數字，顏色或者變數都可以參與運算。就是提供了加（+）、減（-）、乘（*）、除（/）算術運算。
/*Less 裡面寫*/
@width:10px + 5;
div {
border:@width solid red;
}
/*生成的css*/
div {
border:15px solid red;
}
/*less甚至還可以這樣*/
width:(@width + 5) * 2
注意：
-
乘號（*）和除號（/）的寫法
-
運算子中間左右有個空格隔開1px + 5
-
對於兩個不同的單位的值之間的運算，運算結果的值取第一個值得的單位
-
如果兩個值之間只有一個值有單位，則運算結果就取該單位
4.rem適配方案
-
讓一些不能等比自適應的元素，達到當裝置尺寸發生改變的時候，等比例適配當前裝置。
-
使用媒體查詢根據不同裝置按比例設定html的字型大小，然後頁面元素使用rem做尺寸單位，當html字型大小變化元素尺寸也會發生變化，從而達到等比縮放的適配。
4.1 rem實際開發適配方案
-
按照設計稿與裝置寬度的比例，動態計算並設定html根標籤的font-size大小；（媒體查詢）
-
css中，設計稿元素的寬、高、相對位置等取值，按照同等比例換算為rem為單位的值；
4.2 rem適配方案技術使用（市場主流）
技術方案一
-
less
-
媒體查詢
-
rem
技術方案二（推薦）
-
flexible.js
-
rem
總結：
-
兩種方案現在都存在。
-
方案二更簡單
4.3 rem實際開發適配方案一
rem+媒體查詢+less技術
1.設計稿常見尺寸寬度
| 裝置 | 常見寬度 |
|---|---|
| iPhone4.5 | 640px |
| iphone678 | 750px |
| android | 常見320px、360px、375px、384px、400px、414px、500px、720px 大部分4.7~5寸的Android裝置為720px |
一般情況下，我們以一套或兩套效果適應大部分的螢幕，放棄極端屏或對其優雅降級，犧牲一些效果，現在基本以750為準。
2.動態設定html標籤font-size大小
-
假設設計稿是750px
-
假設我們整個螢幕劃分為15等份（劃分標準不一 可以是20份、10份）
-
每一份作為html字型大小，這裡就是50px
-
那麼在320px裝置的時候，字型大小為320/15就是21.33px
-
用我們頁面元素的大小 除以不同的html 字型大小會發現他們比例還是相同的
-
比如我們以750為標準設計稿
-
一個100
-
320螢幕下，html字型大小為21.33 則2rem = 42.66px 此時寬和高都是42.66px 但是寬和高的比例還是1比1
-
但是已經能實現不同螢幕下 頁面元素盒子等比例縮放效果
3.元素大小取值方法
-
最後的公式：頁面元素的rem值=頁面元素值（px）/ （螢幕寬度/劃分的份數）
-
螢幕寬度/劃分的份數 就是html font-size的大小
-
或者：頁面元素的rem值=頁面元素值（px）/ html font-size 字型大小