移動端適配+flexible.js+rem適配-有解無憂

移動端適配

前沿：
移動端web頁面的開發，由于手機螢屏尺寸、解析度不同，或者需要考慮橫豎屏問題，為了使得web頁面在不同移動設備上具有相適應的展示效果，需要在開發程序中使用合理的適配方案來解決這個問題，

基礎概念
俗稱看看就行
在這里插入圖片描述

這個才是正文！！！！
1.width=device-width（設備寬度）或者 value
設定Html寬度（一般與設備的寬度一致）
由于每個設備的寬度不同所以在剛進入到頁面一開始的時候就把最大寬度設定為設備寬度

<meta name="viewport" content="width=device-width>

雖然現在設備寬度為 375px但是由于設定的寬度為400 所以最外面的寬度就為400px

content="width=400"

在這里插入圖片描述

2.user-scalable =默認值為yes 可設定為no
設定用戶是否可以進行縮放一般設為no（不允許縮放）
如果設定了不允許縮放 minimum-scale(最小縮放比例) 和maximum-scale(最大縮放比例) 無效
3.initial-scale= 1.0
初始化縮放比例
4.minimum-scale= 1.0
最小縮放比例
5.maximum-scale= 1.0
最大縮放比例

6.devicePixelRatio（dpr）
像素比

首先咱們需要了解幾個知識點
設備像素(物理像素) css像素(邏輯像素)
設備像素是設備的固定屬性出場就有的
css像素就是在css樣式中自己設定的,是一個抽象的并不存在的

設備像素/css像素=像素比(dpr)

px在移動端不好適配原因:
在PC端一般來說1px(物理像素)=1px(css像素),但是移動端不一定是,css中px 是抽象的，在不同的環境或者設備中1px它所代表的設備像素是不同的，比如物理像素 1200px ,100px就是 12:1 如果物理像素是1000px，100px就是10:1，那么1px大小在不同設備上顯示的大小也不同
不同設備的dpr不同

獲取像素比
window.devicePixelRatio

像素比是幾就相當于我放大幾倍看這個物品
比如說，同一個網站從蘋果4 來看或者蘋果3來看體驗不一樣
蘋果4來看清晰度比蘋果3高（蘋果4像素比比蘋果3高）
像素比越高清晰度越好

7.Viewport
手機瀏覽器默認為我們做了兩件事
1.頁面渲染在一個980px的viewport
2.縮放
為什么要有Viewport？
一個300像素的螢屏里放一個1000多像素的頁面會混亂，所以要虛擬一個980像素的頁面中，進行縮放

8.rem
rem是一個相對單位類似于em(相對于父親的字體大小) （root em,根 em）啥是根呢就是 html 也就可以理解相對于html 的單位

瀏覽器默認的html font-size=16px
如果我們要設定字體大小為 12px
12/16=0.75 所以要設定 font-size:0.75 rem
移動端rem的設定
1.在默認瀏覽器之中 html的 font-size:16px 所以 1rem=16px
假如設計師給我一個元素大小為100px 那我就在頁面上寫的是 100/16 rem
我們看 100/16除不開所以我們可以更改 html 的font-size大小 html{font-size:10px}
那么我們的 1rem=10px
在設定htm字體大小之前先將字體重置一下
html{font-size:100%(也就是16px)}
那么
html{font-size:62.5%(也就是10px)}
這樣就把 1rem =10px
那我們這就好搞了,假如我們親愛的設計師給我們一個 20px的元素，
那我們直接 20/10 =2rem

rem的優點:
可以通過修改html里面的文字大小來改變，頁面中元素的大小，可以整體控制，
那我們怎么根據不同設備的大小修改html里面的文字大小
9.媒體查詢（@media）
使用@media查詢，可以針對不同媒體型別定義不同的樣式
使用@media查詢，可以針對不同媒體尺寸定義不同的樣式

使用方法

/* 
@media 宣告媒體查詢
mediatype 媒體型別（手機、平板、電腦，，）
and|not|only 多個媒體型別的 組合 and（和） not（不包括）only（僅僅）
media feature 媒體尺寸 
*/
@media mediatype and|not|only (media feature) {
/* css樣式 */
}

mediatype的值
all 用于所有設備
print 用于列印機和列印預覽
scree 用于電腦螢屏、平板電腦、智能手機等
media feature的值
max-width:800px 最大尺寸相當于小于等于800px時的樣式

min-width:600px 最小尺寸相當于大于等于600px 時的樣式

width:400px 等于400px時的樣式

10.媒體查詢和rem共同使用
根據不同的螢屏區間調整html的 font-size 從而實作不同設備下元素的顯示大小

@media (max-width: 800px) {
html {
font-size: 20px;
}
}
@media (min-width: 100px) {
html {
font-size: 10px;
}
}

當我們的螢屏尺寸好多的時候并且我們的內容特別多的時候我們就需要根據媒體查詢來引入不同的css檔案

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="xxx.css">

11.rem適配方案
1.讓一些不能等比例適應的元素,達到當設備尺寸發生改變的時候，等比例適配當前設備
2.使用媒體查詢根據不同設備按比例設定html的字體大小，然后頁面元素使用rem做尺寸單位，當html的font-size發生變化時，元素尺寸也發生變化，從而達到等比縮放適配

rem實際開發時的適配方案
1.按照設計稿與設備寬度的比例，動態計算并設定html的font-size (媒體查詢)
2.css中，設計稿元素的寬、高、定位等取值，按同等比例換算出rem為單位的值

rem適配方案技術運用（市場主流）
技術方案1 (我就不會我就不用我也不想用)
Less+媒體查詢+rem
技術方案2（推薦）可以直接引入js 我都不需要知道他的代碼啥意思你說我用哪個？？
flexible.js+rem
我們直接來使用第二種方案
12.flexible.js+rem 適配方法
先來一個特別煩人的介紹吧
這是一個簡潔高效的rem適配方案 flexible.js
這個東西是手機淘寶團隊出的 (一聽淘寶出得,就感覺牛逼)
我們原來適配需要用媒體查詢，煩死了，現在好了，不用了我直接把flexible.js引進來就省得做了

那這玩意是啥原理啊
好的我們不廢話了
他的原理是把設備分為10等份，你肯定想說，那我設備不一樣，分成10份也不一樣啊，
沒事只要他的比例一樣就可以
這10等份的比例是一致的

我們要做的就是把我們設備的 html的font-size 設定好就行了

比如說我們的設計稿是 750px(一般來說設計師以蘋果6寬度作為標準尺寸) 那我們只需要把 html的 font-size 設定為 75px (750/10) 就可以了
所以在蘋果 6 7 8 設計稿為750像素里 1rem=75px
里面元素rem值= 元素的px值/75
剩下的就交給flexible.js

你懵逼了嗎？哈哈哈哈哈我也懵逼了沒關系理論上我們了解一下就好，最主要是實踐
我們先下載一個 flexible.js 我已經提前幫你們下好了在檔案夾里

13.flexible.js+rem 適配實際使用
前期準備
flexible.js
設計稿（750px）
1.引入視口標簽

 <meta name="viewport" content="width=device-width,user-scalable=no initial-scale=1.0">

2.引入flexible.js

<script src="./flexible.js"></script>

3.可以把我們的初始化樣式css檔案引進去

<link rel="stylesheet" href="初始化.css">

完成后
我們打開頁面看一下是否成功引入 flexible.js
flexible.js 把設備分為10等分
我們打開蘋果6 7 8 螢屏寬度像素是375px 那我們的 html的 font-size：17.5px
在這里插入圖片描述

是吧我們就不用媒體查詢了是不是特別簡單

那我們的body{width:10rem;max-width:750px;margin:0 auto;}
充滿螢屏最大值750 設計稿寬度居中
width:10rem; 是因為我們在手機上呈現的比例和設計稿呈現的比例需要一樣
設計稿分為十等份 750px/10=75px 每一份就是75px 反過來來說
設備寬度也就是body的寬度就是 750px /75px=10rem

那我們里面的元素不可能每次都口算吧所以
我們這里有一個插件 vscode中的一個插件叫做 cssrem
cssrem插件用于 px=>rem
在這里插入圖片描述