前言

大大小小做了十幾個(gè)pc項(xiàng)目，感覺(jué)自己上可九天攬?jiān)拢驴晌逖笞谨M能得不行，但是仔細(xì)想一下在一個(gè)公司業(yè)務(wù)做的很6，好像并沒(méi)有什么值得驕傲的，因?yàn)椴煌緲I(yè)務(wù)方向不同，其實(shí)還有很多都沒(méi)有實(shí)戰(zhàn)過(guò)的知識(shí)點(diǎn)，比如移動(dòng)端，前端緩存，前端性能測(cè)試等一系列的東西，畢竟前端的豐富多樣，總能給你不一樣得驚喜，要學(xué)得還有很多，切不可驕傲自滿……

移動(dòng)端適配初探

• 對(duì)前端有點(diǎn)了解得都只知道自從iphone6 ,6+的出現(xiàn)和Android屏幕的百花齊放，移動(dòng)端適配全面進(jìn)入到“雜屏”時(shí)代。

• 之前也有了解過(guò)適配的值是但是沒(méi)有實(shí)戰(zhàn)過(guò)，網(wǎng)上也看了很多帖子，總結(jié)了一下現(xiàn)在的適配方案主要有三種
  rem適配，vw適配, vw + rem適配，對(duì)于那個(gè)更好也一直是嘴炮不斷，糾結(jié)了一下還是選擇了rem作為入門(mén)，如果要給一個(gè)理由的話---出現(xiàn)時(shí)間長(zhǎng)，經(jīng)過(guò)不斷的完善，是比較成熟的適配方案

• flexible.js淘寶一直在用的rem方案，直接拿來(lái)用方便快捷

關(guān)于rem適配原理的講解

最初接觸rem適配是在慕課網(wǎng)上 呂小鳴老師的rem適配秘籍，雖然講的比較初級(jí)，講真的聽(tīng)完之后還是很迷

可能也跟當(dāng)時(shí)基礎(chǔ)較差有關(guān)，不懂什么是媒體查詢(xún)（聽(tīng)名字感覺(jué)很高大上），不懂什么是sass,現(xiàn)在回頭看的時(shí)候感覺(jué)當(dāng)時(shí)自己是真的菜

進(jìn)入正題---記得老師舉了一個(gè)例子以iphone6,7,8為例（375 * 667），ui給的2倍稿 750 * 1334，然后老師給了一個(gè)如下的scss函數(shù)

//scss
@function px2rem($px){
  $rem: 37.5px;
  @return ($px / $rem) + rem
}

//獲取視窗寬度
let htmlWidth = document.documentElement.clientWidth || document.body.scrollWidth;
console.log(htmlWidth);

//獲取視窗高度
let htmlDom = document.getElementsByTagName('html')[0];
//根據(jù)當(dāng)前手機(jī)寬度設(shè)置字體大小
htmlDom.style.fontSize = htmlWidth / 10 + 'px';

當(dāng)時(shí)看完之后楞是沒(méi)有轉(zhuǎn)過(guò)彎，為什么我把$rem定死成37.5px,如果是這樣那么不管如何改變手機(jī)尺寸，px2rem函數(shù)返回得都是固定的值，那么這么寫(xiě)的意義在哪里???
直到再次看的時(shí)候才反應(yīng)過(guò)來(lái)，返回相同的rem值有問(wèn)題嗎？？？ 那當(dāng)然是沒(méi)有問(wèn)題的---只要根元素字號(hào)的px不同，寬度自然是不同的

舉個(gè)例子，有一個(gè)div的設(shè)計(jì)稿寬度是100px,通過(guò)上面的px2rem返回的都是固定的值2.66667rem,這又如何能達(dá)到適配？？？

這次回頭看視頻，把視頻講的東西串起來(lái)，才恍然大悟，上面的第二部分代碼就是動(dòng)態(tài)的設(shè)置根字體的大小，而 1rem = html根字體的大小，不同大小的屏幕根字體的大小不一樣，可不就達(dá)到適配的要求了嗎

再講一些大佬們都已經(jīng)講爛了的知識(shí)點(diǎn)

• 物理像素(physical pixel)
  物理像素又被稱(chēng)為設(shè)備像素，他是顯示設(shè)備中一個(gè)最微小的物理部件。每個(gè)像素可以根據(jù)操作系統(tǒng)設(shè)置自己的顏色和亮度。正是這些設(shè)備像素的微小距離欺騙了我們?nèi)庋劭吹降膱D像效果。
  iphone 6,7,8就是 750*1334
• 設(shè)備獨(dú)立像素(density-independent pixel)
  設(shè)備獨(dú)立像素也稱(chēng)為密度無(wú)關(guān)像素，可以認(rèn)為是計(jì)算機(jī)坐標(biāo)系統(tǒng)中的一個(gè)點(diǎn)，這個(gè)點(diǎn)代表一個(gè)可以由程序使用的虛擬像素(比如說(shuō)CSS像素)，然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。
  iphone 6,7,8就是 375 * 667
• 設(shè)備像素比(device pixel ratio)
  設(shè)備像素比簡(jiǎn)稱(chēng)為dpr，其定義了物理像素和設(shè)備獨(dú)立像素的對(duì)應(yīng)關(guān)系。它的值可以按下面的公式計(jì)算得到：

設(shè)備像素比 ＝ 物理像素 / 設(shè)備獨(dú)立像素

• retina
  指顯示屏的分辨率極高，使得肉眼無(wú)法分辨單個(gè)像素，高清屏比如dpr為2的retina屏，1個(gè)設(shè)備獨(dú)立像素這個(gè)時(shí)候就相當(dāng)于四個(gè)物理像素，會(huì)使畫(huà)面更清晰，所以蘋(píng)果就起了一個(gè)很騷氣的名字‘視網(wǎng)膜’
  在沒(méi)有retina之前，物理像素和設(shè)備獨(dú)立像素是一樣得
  借大佬圖一用

image.png

實(shí)戰(zhàn) vue + elementui + flexible.js

• 把網(wǎng)上的flexible.js拷下來(lái)
• main.js 引入 import './flexible.js'
• 新建common.scss文件

//px 轉(zhuǎn)成 rem
@function px2rem($px){
  $rem: 37.5px;
  @return ($px / $rem) + rem
}

//混合宏設(shè)置字體
@mixin font-dpr($font-size){
  font-size: $font-size;

  [data-dpr="2"] & {
    font-size: $font-size * 2;
  }

  [data-dpr="3"] & {
    font-size: $font-size * 3;
  }
}

• 然后就是新建vue組件開(kāi)始擼

![傳送門(mén)] （https://github.com/yourdear/mobile-first）