在移动端布局的时候通常会遇到需要适应不同设备的尺寸的问题,这时候就需要用到我们的媒体查询了。
代码如下:
<!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;
}
/* 媒体查询最小宽度为320像素的时候将html的字体大小设置为20像素 */
@media screen and (min-width:320px){
html{
font-size: 20px;
}
}
/* 媒体查询最小宽度为640像素的时候将html的字体大小设置为50像素 */
@media screen and (min-width:640px){
html{
font-size: 50px;
}
}
.box {
/* rem 相对于 html元素 字体大小来说的 */
height: 1rem;
font-size: .6rem;
background-color: skyblue;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="box">适应尺寸大小</div>
</body>
</html>
效果图:
分析:
通过上面的案例我们可以看到,当宽度为640像素及以上的时候这时box盒子的高度height=1×50px,font-size=0.6×50px,当宽度为320~639像素的时候这时box盒子的高度height=1×20px,font-size=0.6×20px。解决了不同宽度下的字体和盒子大小适应问题。