怎么使用rem布局

额......很久没有更新了，我也不知道我去干了些什么，写博客这个还是没能成为习惯，当初没有坚持下来，现在我想说一下rem布局，这个很适合进行移动端的也页面制作。有理解错的，希望能指正。

1、什么是rem

rem:W3C官网描述是“font size of the root element”，即rem是相对于根元素的字体大小的单位。简单的说它是一个相对单位。依赖根元素来计算大小，先给html元素一个font-size，然后在页面里的rem都基于html里的font-size来计算。

2、下面我列举下例子

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
        html{
            font-size: 100px;
        }
        </style>
    </head>
    <body>
        <header>
            <div>
                <p>你好</p>
            </div>
        </header>
    
    </body>
</html>

　

 解释：在html里面设置一个font-size,我这里写的是100px,所以在默认没有设定的情况下，里面的内容也是100px，1rem=100px;

 

2-1、

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
        html{
            font-size: 62.5%;
        }
        </style>
    </head>
    <body>
        <header>
            <div>
                <p>你好</p>
            </div>
        </header>
    
    </body>
</html>　　
解释：html设置的是百分比的话 ！这里就是10/16x100%=62.5% ，也就是默认10px的字号,1rem=10px;

这样初始话以后 ，我们会方便很多。以上的代码大家可以试试，可以给<p>,标签里的内容设置一下rem这个单位，会清晰很多。

接下来，我给大家介绍另外一种方式。引入一个js文件就可以了。

(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 = '20px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };

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

大意为：如果屏幕的宽度大于640px的话字体为20px.否则字体大小为100*当前页面的大小/640.为什么是640px呢，我上网查了一下，640px是一个安全的最大宽度，为了保证手机两边不留白。

 

好了，我今天就写到这里了，不知道清不清楚，但是我希望能拿代码去试试。

 

posted @ 2017-10-26 17:53  包子酱呐  阅读(98)  评论(0)    收藏  举报