移动适配
百分比适配
<!DOCTYPE html>
<html>
<head>
<title>百分比适配</title>
<style type="text/css">
.container{
width: 100%;
height:100px;
background: blue;
}
.item{
width:50%;
background: green;
height:100px;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<title>media query适配</title>
<style type="text/css">
.container{
width: 100%;
height:100px;
background: blue;
}
@media screen and (max-width: 375px){
.item{
width:20%;
background: green;
height:100px;
}
}
@media screen and (min-width:376px){
.item{
width:50%;
background: red;
height:100px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
</div>
</body>
</html>
rem 适配
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1,
minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<title> rem 适配 </title>
<style type="text/css">
/**
一.rem 原理
1 rem = 16px(16px 为html的font-size)
计算对应的px为多少rem(要算的px值除以1rem的px值)
eg:
x rem = 180px ;
1 rem = 16px ;
=> x = 180px/16px;
二.根据屏幕宽度动态设置font-size，实现不同屏幕的大小的平滑缩放
思路:
1.取某一个机型为原型,根据设计稿将px转换为rem
2.根据不同的机型，设置不同的font-size
3.由于font-size的改变,rem的大小也会改变从而实现了平滑过度的效果
eg：
iphone 6: 375px * 667px
(rem基准值)font-size = 375px /10 = 37.5 px (即1rem 为37.5px)
其他的px的值 转换为rem :
其他值的rem = 的px值/37.5;
注:
为什么除以10?
除以多少都可以,只是为了使1rem的px 值使用起来符合一般规律
其他的机型设置font-size都要除以同一个数值(10)
*/
/*
设计稿高度375px 算出rem
375px/37.5px = 10 rem
*/
.container{
width: 100%;
height:10rem;
background: blue;
}
/*
37.5px/37.5px = 1 rem
*/
.item{
font-size: 1rem;
}
</style>
</head>
<body>
<div class="container">
<div class="item">test</div>
</div>
<script type="text/javascript">
//动态设置font-size
let htmlWidth = document.documentElement.clientWidth||document.body.clientWidth;
let dom = document.getElementsByTagName("html")[0];
dom.style.fontSize = htmlWidth/10 +'px';
</script>
</body>
</html>