经典rem布局

Posted 2021-01-16 xiaojia-miss

1. rem和em作用

　　q. em是什么？
　　　　是一个长度单位， 是相对单位， 相对于父元素的的font-size的单位
　　　　如果父元素font-size=16px， 1em=16px
　　q. rem是什么？
　　　　是一个长度单位， 是相对单位， 相对于文档根元素的的font-size的单位， 根元素一般是html元素
　　　　如果html元素font-size=16px， 1rem=16px
　　q. 学习那儿用？
　　　　随着界面变大， div，文字， 图片都变大， 使用rem布局

2. 如何自动设置rem的值

　　使用js监控屏幕大小改变的事件， 一般设置 1rem = 100px,
　　如果设计稿是750px
　　规则： 整个屏幕宽度， 都是7.5rem

3. 写一个rem使用的案例

　　经典布局
　　　　导航栏
　　　　内容
　　　　标签栏

 

HTML部分

<div class="navbar">
    <div class="nav-left">[#]</div>
    <div class="nav-title">标题</div>
    <div class="nav-right">设置</div>
</div>
<div class="content">
    <div class="s1">轮播图</div>
    <div class="box">
        <div class="s2">热门1</div>
        <div class="s3">热门2</div>
    </div>
    <ul>
        <li>商品1</li>
        <li>商品2</li>
        <li>商品3</li>
    </ul>
</div>
<div class="tabbar">
    <ul>
        <li>首页</li>
        <li>分类</li>
        <li>购物车</li>
        <li>我的</li>
    </ul>
</div>                

css部分

 1 body{
 2     padding: 0;
 3     margin: 0;
 4     font-size: 0.32rem;
 5 }
 6 ul,li{
 7     list-style: none;
 8     margin: 0;
 9     padding: 0;
10 }
11 .navbar{
12     width: 7.5rem;
13     height: 0.88rem;
14     background-color: #eaeaea;
15     border-bottom: 1px solid #333;
16 }
17 .navbar>div{
18     float: left;
19     font-size: 0.32rem;
20     height: 0.88rem;
21     line-height: 0.88rem;
22     text-align: center;
23 }
24 .navbar .nav-left{
25     width: 1rem;
26 }
27 .navbar .nav-title{
28     width: 5.5rem;
29 }
30 .navbar .nav-right{
31     width: 1rem;
32 }
33 .tabbar{
34     width: 7.5rem;
35     height: 0.98rem;
36     background-color: #eaeaea;
37     border-top: 1px solid #333;
38     position: fixed;
39     bottom: 0;
40 }
41 .tabbar ul li{
42     display: block;
43     float: left;
44     width: 1.825rem;
45     text-align: center;
46     line-height: 0.98rem;
47 }
48 .box>div{
49     float: left;
50     overflow: hidden;
51 }
52 .s1{
53     width: 7.5rem;
54     height: 3.75rem;
55     background-color: lightblue;
56 }
57 .s2{
58     width: 3.75rem;
59     height: 3.75rem;
60     background-color: lightcoral;
61 }
62 .s3{
63     width: 3.75rem;
64     height: 3.75rem;
65     background-color: lightgoldenrodyellow;
66 }
67 .content ul li{
68     height: 0.80rem;
69     width: 7.5rem;
70     display: block;
71     float: left;
72     border-bottom: 1px solid #555;
73     line-height: 0.80rem;
74     padding-left: 0.1rem;
75 }    

js部分

1 var doc = document.querySelector("html")
2 doc.style.fontSize = "13.33333333vw"