先上圖:
補充
補充一些內容,晚上回家仔細研究和思考了一下,在深入的測試中,我發(fā)現(xiàn)其實只要在viewport
里面禁用縮放即可實現(xiàn)自適應頁面宛逗,所有頁面的寬度將默認設置為980px寬找颓,這樣所有手機上頁面寬度
都是一樣寬的椿胯,即不存在適配問題烤黍,只需要rem參考寬度即可自動適應到各手機上。那么阿里為什么還
要給出這樣一套解決方案量瓜?個人認為還是用來處理設計圖和開發(fā)之間的差異,在之前我說的簡單方法
中途乃,頁面寬度是固定的而手機屏幕寬度是不固定的绍傲,因此頁面縮放比被動自適應;阿里則反過來耍共,
利用DPR而主動去計算頁面縮放比烫饼,通過主動計算縮放比,可以得到設備的物理像素试读,設計師在設計時
即可直接參照設備物理像素設計圖紙而不用考慮到邏輯像素對頁面的影響杠纵,因為在上面的算法中,在
頁面縮小和rem反向放大元素的過程中钩骇,DPR對頁面的影響比藻,已經(jīng)完全被約分掉了,設計師可以直接參
考設備物理像素在電腦上設計倘屹。