rem
学习使用
rem
认识
- rem是相对单位(r 意思
root
根元素,html
标签),大小是基于html
元素的字体大小 - em大小是基于
父元素
的字体大小
<!DOCTYPE html>
<html lang="en" style="font-size: 60px">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
padding: 0;
line-height: 1;
font-size: 50px;
}
.em{
/*基于父元素为body,实际大小为100px*/
font-size: 2em;
}
.rem{
/*基于root 根元素,html标签,实际大小为120px*/
font-size: 2rem;
}
</style>
</head>
<body>
<div class="em">AAAAA</div>
<div class="rem">AAAAA</div>
</body>
</html>
rem
适配
移动端适配总结
- 伸缩布局 flex
- 流式布局 百分比
- 响应布局 媒体查询 (超小屏设备的时候:流式布局)
rem
布局
共同点:元素只能做宽度的适配(排除图片)
适配方案rem:宽度和高度都能做到适配(等比缩放)
rem
布局,通过控制html
上的字体大小去控制页面上所有已rem
为单位的基准值控制尺寸
- 把页面上
px
单位转换成rem
单位 - 页面制作的时候
psd
上的量取的px
转成rem
使用
px
转换rem
- 预设一个基准值 方便计算
100px
- 适配的时候设置基准值
320px 50px
怎么算:(·640px 100px ===320px 50px·) - 换算公式:当前rem基准值 = 预设的基准值 / 设计稿宽度 * 当前设备的宽度 (设计稿宽度/当前设备的宽度 = 预设的基准值 / 当前rem基准值)
- 怎么去改变 (js换算,媒体查询推荐)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Title</title>
<style>
/*假设的设备 320px 414px 640px */
@media (min-width: 320px) {
html{
font-size: 50px;
}
}
@media (min-width: 414px) {
html{
font-size: 64.6875px;
}
}
@media (min-width: 640px) {
html{
font-size: 100px;
}
}
body{
margin: 0;
padding: 0;
font-size: 14px;
}
/*流式容器*/
header{
width: 100%;
height: 1rem;
line-height: 1rem;
font-size: 0.32rem;
text-align: center;
background: green;
color: #fff;
}
</style>
</head>
<body>
<header>购物车</header>
</body>
</html>