rem 结合 scss 移动端自适应 初级入门demo

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

首先说明 本篇 内容 适合初级使用 rem 开发移动端 自适应 公式计算 推导过程， 高手绕路。

目标尺寸 = rem  *  根字体大小

Px   =  rem * (html根字体px)

根字体大小 = 比例值 = 屏幕尺寸宽度／PSD稿尺寸宽度

目标尺寸 = rem  *  屏幕尺寸宽度／PSD稿尺寸宽度

Html跟字体浏览器支持 最小 12像素， 避免过小加权 系数 n

实际尺寸                                 实际尺寸              屏幕尺寸宽度            实际尺寸                屏幕尺寸宽度 * n            实际尺寸                 屏幕尺寸宽度

目标尺寸 = —————   *   根字体大小  =  ———————  * —————————— =  —————— * ———————————— =  ———————  * ———————————————————————————

1                                             1               PSD稿尺寸宽度            1 * n                     psd稿 尺寸宽度                a                    b (尽可能让b值小 这样字体不会小于12像素)

psd稿 尺寸宽度 = a * b;

实际尺寸            屏幕尺寸宽度

目标尺寸 = —————— * ————————————

1                     PSD稿尺寸宽度（640）

以PSD 640像素为例

实际尺寸                 屏幕尺寸宽度

目标尺寸 = ———————     *    -------————————

100                  6.4 （640=100*6.4）

回归开始

目标尺寸 = rem  *  根字体大小

结合前端预编译工具 scss  生成rem：

@function rem( $px) {

@return $px*(1/100)*1rem;

}

JS 根据屏幕宽度计算 字体大小：

//- 设置根元素fontSize~

(function (doc, win) {

var _root = doc.documentElement,

resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';

function resizeFont () {

var clientWidth = _root.clientWidth;

_root.style.fontSize = (clientWidth/6.4) + 'px';

//console.log('w:' + clientWidth );

}

win.addEventListener(resizeEvent, resizeFont, false);

doc.addEventListener('DOMContentLoaded', resizeFont, false);

})(document, window);

--------------------延伸-----------------------------------------------------------------------------------

实际尺寸

目标尺寸百分比 =  ————————————————

上下文元素元素尺寸

反推

实际尺寸

Rem  = ——————---------------

根字体大小

---------------------------------------------------------------------------------------------------------

完整代码 链接：