最簡單的移動端適配方案(rem+vw)--沒有之一

  rem 這個單位對於前端來講並不陌生了,在移動端適配方面,咱們常常會用到它,一般咱們會採用相似淘寶flexible.js 的方案, 寫px,而後經過插件轉化成rem,而後得出一堆小數值的rem單位.淘寶這個方案已經用了不少年,兼容性很好,然而如今已經2018年了,許多兼容性問題如今再也不那麼頭疼了,所以咱們如今有了更好的適配方案. 在很早之前,vw 這個單位就已經被列入w3c規範了,若是基本都支持了,vw 表示屏幕的1%,可能有人會問到那跟百分比有什麼區別呢? 一般,不少狀況確實能夠被百分比替代,可是要知道百分好比果要子n代元素都生效,那得全部父級元素都得相對html,body 100%寬纔能有做用,而vw則永遠相對 屏幕1%.說了vw的含義來講說怎麼結合rem適配吧. 這裏直接給出結果,只需一行代碼便可

html{font-size:13.33333333vw}
複製代碼

而後咱們便可根據設計稿(前提設計稿是750px的),這樣咱們寫1rem即爲設計稿上的100px

, 效果如上圖所示,注意:應設置meta爲移動端

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
複製代碼

, 是不感受很詫異,寫的width:1rem,heigth:1rem的div 就是50px* 50px (iphone6爲2倍屏,即對應750px設計稿上的100px*100px) 怎麼搞定的,1句代碼就能實現,太神奇.不信能夠看看上圖或者本身試一下.恩,就是這麼簡單,1句css代碼就搞定,無需任何的js代碼.

   下面分析下原理吧, 上面咱們說了vw表示1%的屏幕寬度,而咱們的設計稿一般是750px的,屏幕一共是100vw,對應750px,那麼1px就是0.1333333vw, 爲了方便計算,咱們放大100倍,同時咱們知道另外一個單位rem,rem是相對html元素,爲了方便計算,咱們取html是100px,經過上面的計算結果1px是0.13333333vw,那麼100px就是13.333333vw了.這樣後面的用rem就很好計算了,這樣就獲得13.3333333vw對應100px(750px的 設計稿),而後咱們就能夠很愉快的寫rem單位了, 因爲倍率是100,咱們也不須要啥計算插件之類的了,除以100,直接小數點向左移動2位,1rem是100px,那麼10px就是0.1rem,1px就是0.01rem,小學生都會算了, 不須要用postcss-px-to-viewport這種工具轉成一堆小數位特長的rem單位了,並且這個很方便,直接寫rem,並不須要轉換,用了轉換工具 若是想寫px的地方還得設置白名單或者黑名單,這個就不存在這種問題了, 想用相對的就rem,想絕對的就直接寫px便可,並不須要其餘的各類設置.是否是很簡單?       改進版:通過一些實踐,發現此方案只能兼容手機,甚至連ipad兼容都很差,固然,此處的兼容不是兼容問題,是效果問題,只要兼容vw的設備都能用這個方案,可是因爲適配的根本是vw這個, 這個會隨着設備的寬度愈來愈大,那麼用rem作單位的元素也會愈來愈大,以致於若是這個在pc上,那麼無法預覽了,效果會不好,字太大了.這樣咱們能夠設置一下當屏幕過大的時候的狀況,咱們能夠加一句代碼

@media (min-width: 560px) {
      html {
        font-size: 54px;
      }
    }
複製代碼

加上這句代碼,在pc上效果也很不錯了, 哈哈,若是問爲何是pc端字體是54px以及爲何是560px爲分界線, 好吧,我也不知道,這個是我本身安裝flexible.js模擬出來的,flexible.js 在560px以上屏幕就是html{font-size:54px} 雖然改進版再也不如上面說的一句代碼解決,不過也算是兩句代碼解決了.仍是很是簡單的哦,不須要任何的轉化工具. 本人已在公司項目作了實踐,效果能夠自行預:meeting.bioon.com/moyan/index… 移動端可掃碼查看:

 查看原文  blog.noob6.com/2018/06/03/…