如何根据设计图设计rem比例

pc端和移动端网站的区别

PC端：屏幕尺寸大,显示内容多,结构复杂,缩小浏览器窗口,页面内容结构并不会发生改变,也并不是响应式。

移动端：屏幕尺寸小,显示的内容有限,结构清晰,简洁,设备种类繁多,浏览器窗口随着移动端的屏幕大小而自适应大小,

rem的概念

rem：相对于根元素(即 html 元素)font-size 计算值的倍数。

• rem布局的本质是等比缩放，一般是基于宽度针对设计稿的宽度 利用js动态获取屏幕的宽度

• rem是相对于根元素的字体大小的单位，也就是html的font-size大小，浏览器默认的字体大小是16px，所以默认的1rem=16px

我们可以根据设备宽度动态设置根元素的font-size，使得以rem为单位的元素在不同终端上以相对一致的视觉效果呈现。

如何根据设计图设计rem比例

rem中的核心公式

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

// document.documentElement.style.fontSize 
// html的字体大小
// document.documentElement.clientWidth / 7.5 + 'px'
//           可视窗口的大小        除于 设计图的宽度除于100  +px

这串代码的效果为

根据屏幕的宽度来改变根元素的字体大小 从而达到对不同的设备进行适配

假如我们的设计稿宽度为750px 使用rem

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

// 

1rem = 100px；
50px 可以写为 0.5rem
10px 写为 0.1rem
如果我们需要占满屏 则需要 7.5rem

为什么要使用rem

在chrome中 chrome强制字体最小值为12px，低于12px按12px处理，不会出现更小的字体，但是使用rem没有这个限制 通常1rem=100px

通过动态根font-size来做适配，基本无兼容性问题，适配较为精准，换算简便

rem的完整代码

 (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=640){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);