适配:指内容根据屏幕自适应。
1.rem适配
rem单位大小是根据 html根标签的 font-size 来决定的,根标签的font-size是根据屏幕大小来定。
vw是将屏幕分成100份 ,1vw 单位等同于屏幕宽度的1/100。如果你的屏幕像素是1200px,那么fontsize就写0.085,就是1rem=1px,如果写8.5,那么1rem=100px。fontsize单位是vw。
html{
font-size: 0.085vw;
}
//我这里修改的是span里的文字大小
span{
font-size: 16rem;//16rem相当于16px
}
2.书翻页
<style>
body{
background-color: rgb(98,121,5);
}
.main{
width: 500px;
height: 600px;
position: absolute;
top: 50px;
left: 500px;
transition: all 3s;
/* 视距 */
perspective: 1500px;
}
.light{
width: 100%;
height: 100%;
background-image: url(./images/bg.jpg);
background-size: cover;
background-position: -230px 0;
/* 拥有定位属性才能有效果*/
z-index: 3;
position: absolute;
transform: all 2s;
/* 值可以用坐标,x y数字。也可以用偏移 */
transform-origin: left;
}
.book{
width: 100%;
height: 100%;
position: absolute;
background-color: white;
}
.main:hover{
transform: rotateZ(-10deg);
/* 设置盒子阴影 */
box-shadow: 0px 1px 14px 9px white;
}
.main:hover .light{
transform: rotateY(-120deg);
box-shadow: 0px 1px 14px 9px white;
}
</style>
</head>
<body>
<div class="main">
<div class="light"></div>
<div class="book">早起的鸟儿有虫吃</div>
</div>
</body>