rem布局简介
程序员文章站
2022-08-10 16:06:15
移动端常见布局： 1.流式布局 高度固定，宽度自适应 2.响应式布局 能够用一套代码适应不同尺寸屏幕 3.rem布局 宽高自适应，能实现整个页面像一张图片一样缩放且不失真的效果。 rem布局： em：是一个相对单位，计算方法为用元素的带px属性值除以自身字体大小，用的很少。 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