使用 rem 做移動端適配

一、為什麼要使用rem

隨著手機的普及，以及手機可以方便攜帶的有優點，所以現在大多數時候，人們都會選擇用移動端檢視網頁。

由於手機的螢幕大小不一，我們使用傳統的px單位已經無法滿足使用者檢視頁面的效果

舉個例子

我們有乙個200 x 200的盒子

如果使用px的話就會出現在不同裝置看到盒子的比例不是一樣大的

.box

class
="box"
>
我是使用ps的效果
二、認識rem
rem也是乙個單位，它的比例轉換是通過html標籤的字型大小轉換的
繼續看例子
我們將單位換成了rem

然後嘗試去動態修改html的font-size樣式即可
.box 

class
="box"
>
我是使用ps的效果
三、用rem實現響應式
我們知道了rem的工作原理，那麼我們只需要乙個js檔案來按照螢幕的比例來進行轉換就可以了
我們寫乙個方法

我們得知道fontsize計算公式
真實螢幕寬度 / 設計稿寬度 * 設計稿字型大小
/*

* design:公司給我們設計稿的寬度
* fontsize: 按照設計個 1rem對應多少px
* 一般情況下設計稿對應 100px 字型大小最佳方便我們運算
* */
letresponsesize
=(design, fontsize)
=>
computedsize()
}responsesize
(640
,200
)

可以看到fontsize在變化，但是是在我們按了f5重新整理之後才變化，我們再對**進行完善

let

responsesize
=(design, fontsize)
=>
computedsize()
// 增加一行事件監聽**
這樣我們就做成了適配各種尺寸的螢幕了，你學廢了嗎？
 
移動端頁面使用rem來做適配
以前我們往往這樣做頁面 viewport width 設定為 device width，然後選我們需要相容裝置的最小寬度 一般是320px 根據這最小寬度來做頁面。單位使用px和百分比。在寬度不同的裝置上，頁面的字型大小，內容尺寸都是一樣的，不同的是，大屏的內容間的空隙比小屏的大。所以這樣做的缺點就...
移動端rem適配
3 使用js 將設計圖劃分為10等份或者15等份。新建common.less檔案，這是乙個專門來適配的檔案。我們大概可以寫如下的檔案 設定常見的螢幕尺寸 修改裡面的html文字大小 a 一定要寫到最上面 html 我們此次定義的劃分的份數 為 15 no 15 320 media screen an...
移動端rem適配
前端在開發移動端頁面時，通常會使用rem對不同解析度的 螢幕進行適配，以達到更好的視覺效果。直接貼上 複製可用。一 function doc,win 乘以100，px rem 100 1 docel.style.fontsize 100 width uidpr px recalc if doc.ad...