web-------rem设置

 一、百分比

固定宽高的百分比布局，以下代码为例，无论使用哪种屏幕 div里面的两个div总是一个占据30%，另外一个占据70%。

<style type="text/css">
    div{
        height: 200px;
        float: left;
    }
</style>
<div style="width: 100%;">
    <div style="width: 30%; background: red"></div>
    <div style="width: 70%; background: blue"></div>
</div>

 二、flex布局

flex 布局推荐阮一峰老师的博客，链接直达：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

三、媒体查询

媒体查询一般通过不同的屏幕宽度进行设置html文件的初始font-size值

       @media screen and (max-width: 320px) {
            html{
                font-size: 16px;
            }
        }

        @media screen and (min-width: 321px) and (max-width: 375px) {
            html{
                font-size: 18px;
            }
        }

四、rem

1.了解1rem=?

• 新建一个html页面并用浏览器运行
• F12审查元素，勾选Filter的Show All ,寻找font-size,最后发觉页面初始值为16px,即1rem=16px.
• 

2.利用媒体查询初始化rem的默认值,查看第三点

3.利用js动态设置rem的值，我习惯使用1rem=100px;具体代码如下：

     f();
    /*设置初始值*/
    function f() {
        let html = document.getElementsByTagName('html')[0];
        let rem = html.offsetWidth <= 750 ? html.offsetWidth / 7.5 : 100;
        html.style.fontSize = rem + "px";
    }

    /*当窗口改变时，重置rem的值*/
    window.addEventListener('resize',function () {
        f();
    })