rem介紹
rem（font size of the root element）是指相對於根元素（即html元素）的字型大小的單位。
假設根元素的字型大小是10px, 則5rem的大小為 5*10=50px,例如
html
prem來做適配
以前我們往往這樣做頁面：viewport width 設定為 device-width，然後選我們需要相容裝置的最小寬度（一般是320px）。根據這最小寬度來做頁面。單位使用px和百分比。在寬度不同的裝置上，頁面的字型大小，內容尺寸都是一樣的，不同的是，大屏的內容間的空隙比小屏的大。所以這樣做的缺點就是，頁面在某些尺寸的裝置上顯示的效果不好。
如果用rem來頁面，我們會根據不同的裝置寬度在根元素上設定不同的字型大小。寬度越寬，字型越大。然後對原本使用px的地方使用rem來替換。這樣，字型大小，內容尺寸，對隨著螢幕寬度的變大而變大
首先js設定html的預設字型大小（寫在html頭部）
設定scss檔案px轉rem
// 預設16是html預設字型大小
// 預設750是設計稿預設寬度
// $n是量取設計稿的距離
@charset "utf-8";
@function rem($n)
編輯方便呼叫的函式：
@function gettop($n)
@function getleft($n)
@function getright($n)
@mixin center($left, $top)
@mixin centerlt($left, $top)
@mixin centerrt($right, $top)
@mixin middlert($ri程式設計客棧ght, $to程式設計客棧p)
@mixin centerb($left, $bottom)
@mixin lefttop($left, $top)
@mixin righttop($right, $top)
@mixin leftbottom($left, $bottom)
呼叫上面的函式（寬高距離用ps量實際距離即可，預設設計稿寬750）：
.page1-img1
本文標題: 手機端用rem+scss做適配的詳解
本文位址:
手機端螢幕適配
2.常見的移動端適配方法 適配方案有很多種，常見的方法有以下幾種 3.rem適配原理 rem是相對長度單位，可以做到一樣的取值，在不同尺寸的螢幕上的大小按比例縮放。rem的定義 rem font size of the root element 是相對於根元素 即html元素 font size計算...
rem手機端適配方案
1.頁面加入如下 function doc,win else if doc.addeventlistener return win.addeventlistener resizeevt,recalc,false doc.addeventlistener domcontentloaded recalc...
使用 rem 做移動端適配
一 為什麼要使用rem 隨著手機的普及，以及手機可以方便攜帶的有優點，所以現在大多數時候，人們都會選擇用移動端檢視網頁。由於手機的螢幕大小不一，我們使用傳統的px單位已經無法滿足使用者檢視頁面的效果 舉個例子 我們有乙個200 x 200的盒子 如果使用px的話就會出現在不同裝置看到盒子的比例不是一...