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即可