rem布局简介
移动端常见布局:
1.流式布局
高度固定,宽度自适应
2.响应式布局
能够用一套代码适应不同尺寸屏幕
3.rem布局
宽高自适应,能实现整个页面像一张图片一样缩放且不失真的效果。
rem布局:
- em:是一个相对单位,计算方法为用元素的带px属性值除以自身字体大小,用的很少。
- rem:是一个相对单位,计算方法为一个html文件中任意元素的带px属性值除以根元素html的字体大小,从而实现宽高自适应。
简单实例:
1.em布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { font-size: 100px; width: 4em; /* 400px */ height: 4em; /* 400px */ background-color: pink; } </style> </head> <body> <div>我是400*400的盒子</div> </body> </html>
效果如图:div内字体大小为100px
2.rem布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> html { font-size: 100px; } div { font-size: 16px; width: 4rem; /* 400px */ height: 4rem; /* 400px */ background-color: pink; } </style> </head> <body> <div>我是400*400的盒子</div> </body> </html>
效果如图:div内字体大小为16px
rem布局实现自适应:
1.配合媒体查询
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <style> /* 一个盒子, 在 750 屏幕上显示 200*200, 在375屏幕上显示 100*100 */ /* 375px屏幕中, font-size: 50px */ @media screen and (width: 375px){ html { font-size: 50px; } } /* 750px屏幕中, font-size: 100px */ @media screen and (width: 750px){ html { font-size: 100px; } } div { width: 2rem; height: 2rem; background-color: pink; } </style> </head> <body> <div></div> </body> </html>
2.通过javascript实现
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { font-size: 16px; } /* 设计图尺寸 640px 基准值 100px */ div { width: 2rem; height: 2rem; font-size: .3rem; background-color: pink; } </style> </head> <body> <div>我是自适应的文字</div> <script> var design = 640; var base = 100; function responsive() { var width = window.innerWidth; // 所求font-size = 当前屏幕宽度 / 设计图 * 基准值 var size = width / design * base; document.documentElement.style.fontSize = size + "px"; } responsive(); window.addEventListener("resize", responsive); </script> </body> </html>
3.使用flexible.js
flexible.js是淘宝移动适配方案,基本原理与上面的通过javascript实现自适应相同,但是做了很多兼容性处理,其中定义:基准值(即html根元素字体大小) = 设计图尺寸 / 10。使用的时候直接在文件中引入包即可。
下载地址:https://github.com/amfe/lib-flexible