rem,em是什么
rem就是响应式的重要单位
响应式布局的常用方案
下面代码就是对字体实现了响应式,在屏幕宽度<374px的情形下,根元素的字体大小是86px,在>375和<413px的情形下根元素的字体是86px,在大于414px情形下更元素字体大小为110px,所以div中的字体分别为0.1686 0.16100 0.16*110
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 对字体实现响应式 */
@media only screen and (max-width: 374px){
/* iphone5或者更小的尺寸,以iphone5的宽度(320px)比例设置font-size */
html{
font-size:86px;
}
}
@media only screen and (min-width:375px) and (max-width:413px){
/* iphone6/7/8和iphomeX */
html{
font-size: 100px;
}
}
@media only screen and (min-width:414px){
html{
font-size: 110px;
}
}
body{
font-size: 0.16rem;
}
#div1{
width: 1rem;
}
</style>
<body>
<div id="div1">乘风破浪会有时</div>
</body>
</html>
响应式 vm/vh
rem的弊端
rem的弊端就是具有阶梯型,分等级的排列,像上一个响应式的例子就是分374 413 两个接线,三个台阶
什么是网页视口尺寸
vw/vh
两者就是上面的vm和vh