普及知识点
(1)浏览器的默认字体大小:16px
(2)chrome字体最小限制:12px
.rem{
/* width: 1rem;
height: 1rem; */
font-size: 16px;
background: red;
}
<div class="rem">a</div>
(3)CSS单位分为绝对单位和相对单位
CSS中,单位分为两类
(1)绝对单位:无论其他相关的设置怎么变化,绝对单位指定的值是不会变化的;
(2)相对单位:没有固定的度量值,是由其他元素尺寸来决定的相对值。
CSS2及CSS3单位集合之em
4、继承性
em是一个相对的单位,是当前元素或相对于父元素字体的大小而言的;
如果父元素没有设置字体大小,则相对于浏览器默认字体大小而言的
rem宽高转换
<style type="text/css">
.rem{
width: 1rem;
height: 1rem;
background: red;
}
</style>
</head>
<body>
<div class="rem"></div>
</body>
rem宽高转换
rem计算验证:
此时再使用rem的话1rem=100px,如果想设置header元素高度为80px,则可以这样设置header{height:0.8rem;}
js实现rem转换
rem布局小技巧:
①页面中模块间距离一般为0.2rem
②文章字体的大小一般分为四个档次 0.2rem 0.24rem 0.28rem 0.32rem,其他字体可以根据设计图自己测量,然后进行计算
移动端开发时常用语法