rem 结合 scss 移动端自适应 初级入门demo
Posted 参天树
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了rem 结合 scss 移动端自适应 初级入门demo相关的知识，希望对你有一定的参考价值。
首先说明 本篇 内容 适合初级使用 rem 开发移动端 自适应 公式计算 推导过程， 高手绕路。
目标尺寸 = rem * 根字体大小
根字体大小 = 比例值 = 屏幕尺寸宽度／PSD稿尺寸宽度
目标尺寸 = rem * 屏幕尺寸宽度／PSD稿尺寸宽度
Px = rem * (html根字体px)
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 = ——————
根字体大小
---------------------------------------------------------------------------------------------------------
完整代码 链接：
以上是关于rem 结合 scss 移动端自适应 初级入门demo的主要内容，如果未能解决你的问题，请参考以下文章