标签：nts list doc ul li one tor 大小 color 一个
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"
标签：nts list doc ul li one tor 大小 color 一个
原文地址：https://www.cnblogs.com/xiaojia-miss/p/9898146.html
