web移动端rem自适应学习

分享一下学习rem自适应移动端网页开发遇到的问题

第一次写博客简单的自我介绍下，我是一位不怎么聪明的小白前端，但我对互联网的喜爱从小时候打游戏开始就一直有种莫名的好感，直到大学毕业我都是在跟着我的兴趣去学习着，一路上大学修完也略知一二但是都没有实际开发过项目，自己网上学习编程是很枯燥的，而前端的入门简单上手快程序员都知道，我也没想到这一学就是个无底洞，无法回头，好歹自己喜欢，不然很难坚持下去呀，学习过程中虽说进步很明显但都是非常零散的知识，会使用会看文档了，能把别人代码看懂了却不知里面的底层原理，之前经常用Vue框架做项目开发，曾在一家刚刚创业的公司里做过uniapp完成上线，这次项目的合作让我更加了解前端开发在一个企业的定位。最近这段时间工作中发现，基础是多么多么的重要，抛开了bootstrap框架，我自己都不知道怎么实现自适应的页面宽度，其中原理是什么，想想我之前面试的很多家公司。深一点的就会问其原理是什么，rem是什么都不知道怎么回答，说来惭愧，我自己还包装了一年经验去的面试，我还算老实吧，感觉不会说谎，如今的我才知道自己在前端工程师地位中只能算是个小白初级，以后还得多学习学习，写得不好得多多指点，大佬多鼓励鼓励，这是我记录学习的方式。

什么是rem？

rem(root em)是一个相对单位，类似与em，他们之间的区别em是父元素字体的大小。而rem的基准是相对于html元素的字体大小

// 比如在style里我们设置html的font-size大小为100px
 html{
            margin: 0;
            padding: 0;
            font-size: 100px;
        }

后面我们设置一个宽高为1em的盒子看看

这里的盒子大小就会变成1*100px,所以你后面做的所有大小都会自适应的变，但是html写死了就不行了，因为也要根据不同的屏幕尺寸来相应变化，html的font-size要根据需求为动态变化的。让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。

做一个适配需要在viewport里设置

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

然后就是js代码了这是很关键的一步，根据屏幕尺寸调节html的大小变化，废话不多说，就默认设计稿宽度为750px,不管你拿到的设计稿宽度是640px还是750px，多大都一样。和我们平时做PC页面的做法基本一样，只需要把单位px换算成rem，所有设计稿的的元素大小全除以100单位换成rem，例如设计稿上个某个文字的大小为30px，直接写font-size:0.3rem。

(function (win, doc) {
        if (!win.addEventListener) return;
        var html = document.documentElement;
        function setFont() {
            var html = document.documentElement;
            var k = 640;
            html.style.fontSize = html.clientWidth / k * 100 + "px";
        }
        setFont();
        setTimeout(function () {
            setFont();
        }, 300);
        doc.addEventListener('DOMContentLoaded', setFont, false);
        win.addEventListener('resize', setFont, false);
        win.addEventListener('load', setFont, false);
    })(window, document);

注意事项就是元素的大小要是小于1px的直接用1px不要用rem，会有误差。

web移动端rem自适应学习