css笔记：rem布局

rem布局能够等比例的缩放页面(宽高都自适应,在移动端较好),用户体验相对百分比布局可能会更好一些

1 rem定义

rem（font size of the root element）是指相对于根元素的字体大小的单位。它是一个相对单位。

em（font size of the element）是指相对于当前元素的字体大小的单位。它也是一个相对单位。

【01-em布局存在问题.html】

• css

body{
    font-size: 20px;/*此时在浏览器的调试窗口改变这个值,会等比例放大和缩小*/
}
.box{
    width: 25em;/* 500px*/
    height: 25em;/*500px*/
    border: 1px solid red;
    margin: 2.5em auto;/*20px*/
}
.in{
    width: 15em;/*300px*/
    height: 15em;/*300px*/
    border: 1px solid blue;
    margin: 2.5em auto;/*20px*/
    /*font-size: 20px;*/  /*这里加上这行布局就乱了*/
}

• html

<div class="box">
     <div class="in">
     全栈工程师,呸,全干工程师才对。
     </div>
 </div>

总结：不能用em来布局,而是经过rem来布局。em来布局,当前元素的font-size一改变,布局就乱了。

【02-rem布局.html】

将【01-em布局存在问题.html】这个例子中的css改为rem

html{
     font-size: 20px;/*此时在浏览器的调试窗口改变这个值,会等比例放大和缩小*/
 }
.box{
    width: 25rem;/* 500px*/
    height: 25rem;/*500px*/
    border: 1px solid red;
    margin: 2.5rem auto;/*20px*/
}
.in{
    width: 15rem;/*300px*/
    height: 15rem;/*300px*/
    border: 1px solid blue;
    margin: 2.5rem auto;/*20px*/
    font-size: 30px;/*加上这个布局也不会乱*/
}

2 rem实现响应式

由于rem的基准点是根元素html的字体大小，所以只须要设置不一样屏幕的html的font-size大小不同就能够达到不一样屏幕的适配了。

注意：

• 在设置背景图片的时候必定要设置backgroud-size的rem,图片才能实现响应式。
• 总体布局的时候不要使用rem,用rem总体布局会乱；好比一行放3个盒子或者n个盒子，可使用百分比实现;rem只用来修饰font-size,height,width等等。

2.1 rem+媒体查询实现

使用rem配合媒体查询能够适配多个终端
// 320 360 375 384 400 414 424 480 484 540 720 750

@media (min-width: 320px) {
    html {        
        font-size: 42.67px;
    }
}
@media (min-width: 375px) {
    html {
        font-size: 50px;;
    }
}
@media (min-width: 414px) {
    html {
        font-size: 55.2px;;
    }
}
@media (min-width: 480px) {
    html {
        font-size: 64px;;
    }
}
@media (min-width: 640px) {
    html {
        font-size: 85.33px;
    }
}
@media (min-width: 750px) {
    html {
        font-size: 100px;;
    }
}

优势：使用媒体查询适配，速度快。

缺点：适配多个终端时，须要添加响应的代码。

2.2 rem+JavaScript实现

原理：经过js监听浏览器的宽度,动态设置html的font-size的值

通常状况下1rem的值设置为屏幕宽度的十分之一

// 1rem大小为 屏幕宽度1/10
// 动态监听屏幕宽度变化，实时设置rem大小

function setRem() {
    var w = window.innerWidth; //获取屏幕宽度
    //最大宽度限制
    if (w > 640) {
        w = 640;
    } 
    //设置rem大小
    document.documentElement.style.fontSize = w / 10 + 'px';
}

setRem();

//监听浏览器窗口尺寸变化
window.onresize = setRem;

优势：直接适配全部的终端

缺点：必须在页面加载以前设置html的font-size值，否则会出现文字大小调动的状况。

2.3 总结

rem+js的方式会更好一些

3 vscode的rem插件

px2rem插件能够快速的将px转化成rem单位

使用方法

• 第一步：安装插件,安装完插件后须要重启vscode
• 第二步：右击插件--->扩展设置--->Root Font Size下输入框中设置font-size便可
• 第三步：在样式中输入px时,在下拉选项中选择转化成rem便可