1.rem适配(把屏幕分成10份)
说明:移动端的项目需要进行屏幕的适配,rem是一个不错的选择
介绍:它是css的一个单位
它是动态变化的单位
它以html的font-size属性为基准来变化
如果html的font-size大小为37.5px,那么1em=37.5px
如果html的font-size大小为16px,那么1em=16px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html{
font-size: 20px;
}
#app{
width: 10rem;
height: 20vh;
background-color: pink;
}
</style>
</head>
<body>
<!-- <script src="./flexible.js"></script> -->
<div id="app"></div>
</body>
</html>
如上代码所示#app的宽度=10*20=200px
因为移动端的屏幕大小并不相同,所以需要用到媒体适配
2.@media screen and(max-width:400px){}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
@media screen and (min-width:414px){
html{
font-size: 41.4px;
}
}
@media screen and (max-width:375px){
html{
font-size: 37.5px;
}
}
#app{
width: 10rem;
height: 20vh;
background-color: pink;
}
</style>
</head>
<body>
<div id="app"></div>
</body>
</html>
如上代码所示,当移动端的屏幕小于等于375px时,#app的宽度-》10*37.5=375px
当移动端的屏幕大于等于414px时,#app的宽度-》10*41.4=414px
以上又会出现一个新的问题,现在移动端的尺寸那么多的类型,难道要一个一个写,。。。。
3.引入 flexible.js文件
说明:由于将来屏幕设备非常多
所有的设备样式都添加到媒体查询中不太合适
可以使用插件,flexible,来帮我们自动设置rem的基准值
原理:flexible在屏幕的宽度发生变化时:
得到屏幕宽度
使用宽度除10得到rem的基准值
再将基准值设置给html的font-size属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#app{
width: 5rem;
height: 20vh;
background-color: pink;
}
</style>
</head>
<body>
<script src="./flexible.js"></script>
<div id="app"></div>
</body>
</html>
如上代码,#app占用屏幕的一半 (出现一个小问题,切换移动设备,#app可以看到宽度的变动)
---------------------------------------------------------------------------------------------------------------------------------
那我设置屏幕宽度百分比不是更好吗????